JQuery中鼠标悬停和鼠标悬停时停止和继续动画的方法

Posted 2023-05-08

【中文标题】JQuery中鼠标悬停和鼠标悬停时停止和继续动画的方法

【英文标题】：The way to stop and continue animation while mouseover and mouseout in JQuery

【发布时间】：2011-07-02 14:31:54

【问题描述】：

例如：

一个简单的例子来解释：

$('.moveDiv').animate( "margin-left": 2000 , 20000, 'linear');

moveDiv element在加载时会向左移动，现在，当mouse move overmoveDiv element时，我希望它停止并在mouse move out时继续移动！

有什么想法吗？

我在question of ***找到了这段代码，所以，我只想修改代码，让它在鼠标悬停时可以停止并继续动画！！

the demo of the code

【参考方案1】：

Pause / Resume Animation Plugin

    $(document).ready(function () 

        $(".moveDiv")
        .mouseover(function ()  $(this).pauseAnimation(); )
        .mouseout(function ()  $(this).resumeAnimation(); )
        .startAnimation( "margin-left": 2000 , 20000, 'linear');

    );

【参考方案2】：

试试：

$('.moveDiv')
    .animate( "margin-left": 2000 , 20000, 'linear')
    .hover(function()
        $(this).stop(true,false);
    ,
    function()
        $(this).animate( "margin-left": 2000 , 20000, 'linear')
    );

告诉我你过得怎么样……

哎呀.stop(true,false);

【讨论】：

也可以。但是悬停几十次后动画会变慢！真的很可怜

是的，刚刚播放 - 这是因为一旦初始动画开始，它会在 20 秒内移动 2000 像素。暂停，然后在 1000 像素处再次开始动画 - 所以现在动画在同一时间有一半的距离......

【参考方案3】：

刚刚在 EBCEu4 的解决方案中找到了建议的插件 - 可能会使用它，但可重复使用的解决方案是：

var duration = 5000;
var target = 200;
$('.moveDiv')
    .animate( "margin-left": target , duration, 'linear')
    .hover(
     function()
        $(this).stop(true,false);
    ,
    function()
        var $this = $(this);
        var cur = parseInt($this.css('margin-left'));
        $this.animate( "margin-left": target , duration*((target-cur)/target), 'linear')
    );