如何使用 jQuery animate() 方法使 div 左右移动？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7369370/
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
How to make div move right and left using jQuery animate() method?
提问by Remy
Please take a look at this:
请看看这个：
If you click right the box moves right and if you click left the box moves left. However if you click right again, nothing...
如果你点击右边，盒子向右移动，如果你点击左边，盒子向左移动。但是，如果您再次单击右键，则什么都没有...
How can I get it to move right and left as many times as I like instead of it working for one round and then not working again?
我怎样才能让它随心所欲地左右移动，而不是它工作一轮然后不再工作？
Also if you clock left first and then right it also messes up, how to solve that?
此外，如果您先向左计时然后向右计时，它也会出错，如何解决？
jquery:
查询：
$('.right').click(function(e) {
e.preventDefault();
$('#foo').animate({
'right' : '30px'
});
});
$('.left').click(function(e) {
e.preventDefault();
$('#foo').animate({
'left' : '30px'
});
});
html:
html：
<a href="" class="left">left</a> | <a href="" class="right">right</a>
<br /><br />
<div id="foo" style="background:red;width:100px;height:100px;position:absolute"></div>
回答by Joe
The second time it tries to animate, it already has 30px right positioning left over from the first animation.
第二次尝试动画时，它已经有了第一个动画剩下的 30px 右侧定位。
As to why it jumps at the start of the left animation; the body has padding, so by default the sliding block is indented with padding. When we set the leftproperty to 0 at the beginning of the animation, it jumps outside the padding (to the absolute position of 0px left). Apply a body padding of 0px to fix it.
至于为什么它在左边动画开始时跳跃；身体有填充，所以默认情况下滑块是用填充缩进的。当我们left在动画开始时将属性设置为 0 时，它会跳到 padding 之外（到左边 0px 的绝对位置）。应用 0px 的 body padding 来修复它。
$('.right').click(function(e) {
e.preventDefault();
$('#foo').css({ 'right': '0px', 'left': '' }).animate({
'right' : '30px'
});
});
$('.left').click(function(e) {
e.preventDefault();
$('#foo').css({ 'right': '', 'left': '0px' }).animate({
'left' : '30px'
});
});
回答by Shwet
very simple use
使用非常简单
<script src="jquery.min.js"></script>
<script src="jquery-ui.min.js"></script>
<script>
$(document).ready(function(){
$("#flip").click(function () {
$("#left_panel").toggle("slide", { direction: "left" }, 1000);
});
});
</script>
回答by Jeb Eb
You can also just say left:'-=25px'
你也可以说 left:'-=25px'
sample
样本
<script>
$("document").ready(function(){
$(".left").click(function(){
$(".box").animate({ left: '+=25px' }); });
$(".right").click(function(){
$(".box").animate({ left: '-=25px' }); });
});
</script>
