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

【问题标题】：jQuery animate() to move div right, then left, on clickjQuery animate() 在点击时向右移动 div，然后向左移动
【发布时间】：2012-09-05 17:58:53
【问题描述】：

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

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

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

【问题讨论】：

标签： jquery jquery-animate

【解决方案1】：

jsBin demo

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（需要的 100px）并且每个偶数 (0*100) 将导致我们的 0px！

或者像这样：

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

【讨论】：

+1 不错的自定义切换功能，应该做 OP 想要的！
嘿 Roko，我以为这样可以解决问题，但似乎仍然保持向右滑动。 jsfiddle.net/chris_s/jh3gh
@chris_s 你在那里粘贴了一些奇怪的代码。我用 2 个例子重新编辑了我的答案。看一下 - 只需将您喜欢的那个粘贴到您的小提琴中或试一下我的演示
@Roko，我的错。我正在使用您输入的原始代码。这些工作很好，正是我需要的。谢谢！
@chris_s 抱歉耽误了几分钟，第一个代码是我第一次尝试提醒我发布的代码（提供演示）thx

【解决方案2】：

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

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

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

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案4】：

最好使用 .queue 和 .dequeue 对这两个效果进行排队

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

【讨论】：