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

发布于 2024-10-18 11:53:42 字数 500 浏览 1 评论 0原文

例如：

一个简单的例子来解释：

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

moveDiv 元素在加载时会向左移动，现在，当鼠标移到 moveDiv 元素上时code>，我希望当鼠标移出时它停止并继续移动！

有什么想法吗？

我在这个stackoverflow的问题中找到了这段代码，所以，我只想修改代码来使它当鼠标悬停时可以停止和继续动画！

代码演示

原文

E.g:

a simple example to explain:

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

the moveDiv element would move to left when it was loaded,and now, when the mouse move over the moveDiv element, I wish it to stop and continue to move when the mouse move out!

Any ideas?

I found this code in this question of stackoverflow,so , I just want to modify the code to make it could stop and continue animation when mouse hover!!

the demo of the code

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

赠我空喜 2024-10-25 11:53:42

暂停/恢复动画插件

    $(document).ready(function () {

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

    });

Pause / Resume Animation Plugin

    $(document).ready(function () {

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

    });

回复收藏 0 原文

调妓 2024-10-25 11:53:42

尝试：

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

让我知道你进展如何...

哎呀.stop(true,false);

Try:

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

let me know how you get on...

oops .stop(true,false);

回复收藏 0 原文

泪意 2024-10-25 11:53:42

刚刚找到了 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')
    });

Just found the plugin suggested in EBCEu4's solution - prob use that but the far-less reuseable solution would be:

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

回复收藏 0 原文

~没有更多了~