Как переключить анимацию при нажатии кнопки

Question

У меня есть следующий код j-запроса (с помощью jquery plugin 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> 

то, что я хочу, чтобы это произошло это, когда # tab_box3 ДИВ нажал на второй раз, # 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); 
}