Question

我试图让div向右滑动然后再向左滑动。我目前有这个代码，但它向右滑动，然后立即向后滑动，没有第二次点击。我也试图实现切换，但最终打破了脚本。我感觉如此接近但似乎无法指出它。

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

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

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

Answer 2

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

所以你的div根据第一个函数移动100px，然后立即触发第二个函数然后移回。

您可以通过发出提醒进行检查..即使只需点击一下，您也可以看到两个提醒。

Answer 3

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

Answer 4

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

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

jQuery animate（）将div向右移动，然后向左移动，点击

4 个答案:

jsBin demo