jQuery animate() 将 div 向右移动，然后向左移动，点击
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12287176/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery animate() to move div right, then left, on click
提问by chris_s
I am trying to get a div to slide to the right and then back left on click. I currently have this code, but it slides right, then immediately slides back left without a second click. I also tried to implement toggle, but ended up breaking the script. I feel so close but can't seem to nail it.
我试图让一个 div 向右滑动，然后在点击时向左滑动。我目前有此代码，但它向右滑动，然后立即向左滑动，无需再次单击。我也尝试实现切换，但最终破坏了脚本。我感觉很近，但似乎无法钉住它。
$(function(){
$("#click").click(function(){
$("#click").animate({left:'+=100px'}, 'fast');
});
$("#click").click(function() {
$("#click").animate({left:'0'}, 'fast');
});
});
回答by Roko C. Buljan
jsBin demo
jsBin 演示
var c=0;
$("#click").click(function(){
$(this).stop().animate({left: ++c%2*100 }, 'fast');
});
To explain the math behind this solution:
after every click the var cgets pre-incremented so basically after 10 clicks cwill be == 10and using modulus10%2 = 0,
and if you continue to click the math is:
11%2 =1
12%2 =0
13%2 =1
14%2 =0... and so on
if you multiply 1 by 100 = 100 (the 100px needed) and every even (0*100) will result in our 0px!
解释这个解决方案背后的数学原理：
每次点击后var c都会预先增加，所以基本上在 10 次点击c后将== 10使用mod10%2 = 0，如果你继续点击数学是：
11%2 =1
12%2 =0
13%2 =1
14%2 =0。 .. 依此类推，
如果您将 1 乘以 100 = 100（所需的 100px）并且每个偶数 (0*100) 将导致我们的 0px！
or like this:
或者像这样：
var dir = 0;
$("#click").click(function(){
dir = dir===0 ? 100 : 0;
$(this).stop().animate({left: dir }, 'fast');
});
回答by Sushanth --
That is because according to the first event the Div actually moves right by 100px. But you defined two click events right . So the event is called twice for each click.
那是因为根据第一个事件，Div 实际上向右移动了 100 像素。但是你定义了两个点击事件对。因此，每次单击都会调用该事件两次。
So your div moves 100px accoding to the first function, then immediately the second function is fired and it moves back.
因此，您的 div 根据第一个函数移动 100px，然后立即触发第二个函数并返回。
You can check this by placing an alert.. You can see two alerts even for a single click..
您可以通过放置警报来检查这一点。即使单击一下，您也可以看到两个警报。
回答by Shomz
You need to determine (either by the leftoffset value or by a variable) where the div is currently and according to that move it in the right direction (if it's left, move it right, and vice versa). So, basically an if-clause within a single click function handles this.
您需要确定（通过left偏移值或变量）div 当前所在的位置，并据此将其向右移动（如果向左移动，则向右移动，反之亦然）。所以，基本上是一个单击函数中的 if 子句来处理这个问题。
回答by steve-er-rino
It might be best to queue the two effects use .queue and .dequeue
最好使用 .queue 和 .dequeue 将两种效果排队
You can see some examples and the spec here: http://api.jquery.com/queue/
您可以在此处查看一些示例和规范：http: //api.jquery.com/queue/
