javascript - 如何在单击按钮时切换动画

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>

我想要发生的是当第二次单击#tab_box3 div 时，#tab3 div 移回它最初开始的位置。

我使用 Toggle 尝试了以下操作，但似乎没有奏效：

<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);
}