Как сделать для переключения анимации на объект

Question

Я хочу сделать левую полосу, когда вы нажмете на нее анимировать CSS left 10 и когда я нажму на нее, вернитесь к CSS по умолчанию.

Я попробовал этот код:

$('.left-bar').click(function() { 
    $('.left-bar').toggle(function() { 
     $(this).animate({ 
      // style change 
      left: "-116x" 
     }, 500); 
    }, function() { 
     $(this).animate({ 
      // style change back 
      left: "-185px" 
     }, 500); 
    }); 
} 

Answer 1

Вместо использования .toggle вы можете сделать что-то, как показано ниже. Пример основан на .animate.

В примере я использую .data для хранения состояния элемента, isToggled. На основе этих данных я могу выяснить, могу ли я перейти в состояние и вернуться к предыдущему.

var $leftBar = $('.left-bar'); 
 
$leftBar.click(function() { 
 
    var isToggled = $leftBar.data('toggled'); // get data 
 
    
 
    var action = isToggled ? "+=100px" : "-=100px"; 
 
    $leftBar.animate({ "left": action }, 500); 
 
    
 
    $leftBar.data('toggled', !isToggled); // set the opposite state of current one 
 
});

.left-bar { 
 
    position: absolute; 
 
    background-color: blue; 
 
    width: 50px; 
 
    height: 50px; 
 
    left: 150px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="left-bar"></div>

Примечания:

1. "left":"+=100px" Это добавляет 100px к существующей левой переменной (., Например, если left = 100 то результат будет left += 100px = 200px). -=100px означает, что вычитается 100px (например, если left = 100, тогда результат будет left -= 100px = 0px).

2. Я не использовал .toggle(), потому что это то, что говорят, что документация:

Показать или скрыть совпавшие элементы

И вы хотите изменения CSS из элемент не скрыть и отобразить.