如何使用 jquery 的 animate 方法使 div 来回移动

Posted 2023-05-08

【中文标题】如何使用 jquery 的 animate 方法使 div 来回移动

【英文标题】：How do I use jquery's animate method to make a div move back and forth

【发布时间】：2012-03-15 14:11:34

【问题描述】：

我想让一个 div 在某个区域内水平来回动画。我现在遇到的问题是我不知道如何让我的 div 在它向前移动后向后移动。

这是我正在使用的脚本：

  <script type="text/javascript">
    var animatethis = function (targetElement, speed) 
        $(targetElement).animate(
            
                marginLeft: "+=250px"
            ,
            
                duration: speed,
                complete: function () 
                    animatethis(this, speed);
                    animatethis.stop();
                    $(targetElement).animate( marginLeft: "-=250px" );
                
            
                    )
    ;
    animatethis($('#q1'), 5000);
</script> 

【问题讨论】：

你只需要在第一个动画后回调，试试我的答案。

是的，如果我没有说清楚，我希望它循环抱歉

【参考方案1】：

查看您的浏览器控制台。 animatethis 没有返回任何东西，这意味着该行

animatethis.stop();

总是会崩溃（类似于“TypeError：无法调用未定义的方法'stop'”）。您还混淆了complete 回调中的动画顺序。

停下来，呼吸一下，想想上面的代码实际上在做什么。

---

好的，所以在marginLeft 增加之后，你想减少它。 然后你想从头再来。正确的？所以：

function animatethis(targetElement, speed) 
    $(targetElement).animate( marginLeft: "+=250px",
    
        duration: speed,
        complete: function ()
        
            targetElement.animate( marginLeft: "-=250px" ,
            
                duration: speed,
                complete: function ()
                
                    animatethis(targetElement, speed);
                
            );
        
    );
;

animatethis($('#q1'), 5000);

还有很多其他方法可以给这只猫剥皮，但这确实有效。 http://jsfiddle.net/mattball/rKu6Y/

【讨论】：

哇，谢谢，这正是我所需要的，是的，当我使用 stop 时，它正在将内容打印到输出面板

不知道为什么它不会触发堆栈溢出异常，因为这本质上是一个无限递归。

@Neolisk 回调不会一直添加到堆栈中——它们稍后会被调用。

【参考方案2】：

你想这样做吗？ http://jsfiddle.net/vwH6R/2/

setInterval(function()
    $("div").stop(true,true).animate(left: 300, 1000, 
          function() $(this).stop(true,true).animate(left: 0, 1000); 
    );
, 2000);​

【讨论】：

这个最好。

【参考方案3】：

试试this小提琴

HTML

<div class="myDiv">A Div</div>​

JS

$('.myDiv').animate(
   'margin-left':'50px'
, 500, function(e)
$('.myDiv').animate(
    'margin-left':'0px'
, 500));​

【讨论】：

我认为 OP 希望动画循环播放。也许我错了。

谢谢，但我认为他只是想前进并再次返回。

【参考方案4】：

如果你要多次来回移动它，你可以把它包装成一个函数，调用它自己。像这样的：

function wobble(selector, amount, times, intSpeed) 

    var string = String($(selector).css("marginLeft")).replace("px", ""),
    leftMargin = parseInt(string, 10);

    $(selector).animate( marginLeft: (leftMargin + amount) + 'px' , intSpeed, function () 
        if (times > 0) 
            wobble(selector, -amount, --times, intSpeed);
         else 
            $(selector).css("marginLeft", leftMargin + 'px');
        
    );

【参考方案5】：

使用 jQuery queue() 方法链接事件：http://api.jquery.com/queue/