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

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

2 个答案: