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

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/