如何使不同的動畫切換到一個項目

Question

我想在點擊它時製作左欄，並將它設爲動畫效果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"在加入100像素到現有的左側變量（例如，如果left = 100那麼結果將是left += 100px = 200px）。 -=100px表示減去100px（例如，如果left = 100那麼結果將是left -= 100px = 0px）。

2. ，因爲它做什麼的文檔說我沒使用.toggle()：

顯示或隱藏匹配元素

而你要的改變CSS元素不能隱藏並顯示。