如何在單擊按鈕時切換動畫

Question

我有以下j-query代碼（使用jquery插件ajax/libs/jquery/1.10.1）將div元素向左移動，只需單擊一個單獨的div元素：

<script> 
$(document).ready(function(){ 
$("#tab_box3").click(function(){ 
$.fx.speeds._default = 800;    
$("#tab3").animate({left:"+=97%"}); 
}); 
}); 
</script> 

上點擊第二次＃DIV tab_box3時，我希望發生的是，在＃DIV TAB3移回到它最初開始。

我嘗試以下，使用切換，但它似乎並沒有工作：

<script> 
$(document).ready(function(){ 
$("#tab_box3").click(function(){ 
$.fx.speeds._default = 800;    
$("#tab3").animateToggle({left:"+=97%"}); 
}); 
}); 
</script> 

任何人都可以提供建議好嗎？

Answer 1

你必須做這樣的事情：

$(document).ready(function(){ 
    $("#tab_box3").click(function(e){ 
     var element = $(this), 
      clicked = parseInt(element.data('clicked')) || 0; 

     element.data('clicked', clicked + 1); 
     $("#tab3").stop(); 
     if (clicked % 2 == 0) 
     { 
      $("#tab3").animate({left:"+=97%"}, 800); 
     } 
     else 
     { 
      $("#tab3").animate({left:"-=97%"}, 800); 
     } 
     e.preventDefault(); 
    }); 
}); 

這裏的一個例子： http://jsfiddle.net/Q5HDu/

Answer 2

您將不得不使用-=97%來抵消先前的動畫更改。

var $tab3 = $("#tab3"); 
if ($tab3.data("animated")) { 
    $tab3.animate({left: "-=97%").data("animated", false); 
} 
else { 
    $tab3.animate({left: "+=97%").data("animated", true); 
}