jquery - jQuery animate() 在点击时向右移动 div，然后向左移动

Question

我试图让一个 div 向右滑动，然后在单击时向左滑动。我目前有这个代码，但它向右滑动，然后立即向左滑动而无需再次单击。我也尝试实现切换，但最终破坏了脚本。我感觉如此接近，但似乎无法确定它。

$(function(){
    $("#click").click(function(){
        $("#click").animate({left:'+=100px'}, 'fast');
    });

    $("#click").click(function() {
        $("#click").animate({left:'0'}, 'fast');
    });
});

Answer 1

jsBin 演示

var c=0;
$("#click").click(function(){
    $(this).stop().animate({left: ++c%2*100 }, 'fast');
});

解释这个解决方案背后的数学：
每次点击后var c都会预先增加，所以基本上在 10 次点击后c会== 10使用模数 10%2 = 0，如果你继续点击数学是：
11%2 =1
12%2 =0
13%2 =1
14%2 =0。 .. 以此类推，
如果您将 1 乘以 100 = 100（所需的 100 像素），并且每个偶数 (0*100) 将导致我们的 0 像素！

---

或像这样：

var dir = 0;
$("#click").click(function(){
     dir = dir===0 ? 100 : 0;
     $(this).stop().animate({left: dir }, 'fast');
});

Answer 2

这是因为根据第一个事件，Div 实际上向右移动了 100 像素。但是你定义了两个点击事件是对的。因此，每次点击都会调用该事件两次。

因此，您的 div 根据第一个函数移动 100px，然后立即触发第二个函数并向后移动。

您可以通过发出警报来检查这一点。即使单击一下，您也可以看到两个警报。

Answer 3

您需要确定（通过left偏移值或变量）div 当前的位置，并据此将其向右移动（如果向左，则向右移动，反之亦然）。因此，基本上单击函数中的 if 子句可以处理此问题。

Answer 4

最好使用 .queue 和 .dequeue 将这两个效果排队

您可以在此处查看一些示例和规范：http: //api.jquery.com/queue/