jQuery 暂停/恢复动画答案

【问题标题】：jQuery Pause / Resume animatejQuery 暂停/恢复动画
【发布时间】：2011-07-31 23:02:35
【问题描述】：

这对我不起作用...

$(document).ready(function(){
    $('#h .a').animate({
        top:'-=80px'
    },90,'linear');

    $('#h .au,#h .di').animate({
        left:'-=80px'
    },50000000,'linear');

    $('#h .r').animate({
        left:'-=80px'
    },250,'linear');

    $("#h").animate('pause'); //pausing it at the start
    //resume pause switch
    $("#h").mouseover(function(){
      $(this).animate('resume');
    }).mouseout(function(){
      $(this).animate('pause');
    });

});

【问题讨论】：

Jquery animate 没有暂停/恢复功能，您可以使用插件或自己编写。

标签： javascript jquery jquery-animate

【解决方案1】：

试试这个暂停和恢复：jQuery Pause / Resume animation plugin

我们$(this).stop() 也可以暂停动画但没有机会继续！

另一个错误是这个：top:'-=80px'

首先尝试像这样获取当前位置，然后向其添加位置：

_top = $(this).offset().top;

$('#h .a').animate({
    top:_top-80
},90,'linear')

【讨论】：

【解决方案2】：

在此处查看演示：http://api.jquery.com/clearQueue/

看起来正是你想要做的那种事情。

【讨论】：

【解决方案3】：

检查插件：Fxqueues

https://github.com/lucianopanaro/jQuery-FxQueues

它同时支持暂停和恢复（不清除队列），并添加了 Scopes 的思想。范围非常适合在多个对象之间链接动画。

我还没有找到适用于当前 Jquery 版本的 Fxqueus 版本，但已成功将其与旧 Jquery 版本一起使用。

【讨论】：

【解决方案4】：

您需要考虑为此使用.stop() 函数，因为它会停止 jQuery 元素上的任何动画。

http://api.jquery.com/stop/

【讨论】：

【解决方案5】：

使用queue() 和dequeue() 函数。这是一个直接取自 jQuery 文档的示例。

在http://jsfiddle.net/j4SNS/查看工作示例

【讨论】：

如果在正方形从右向左移动时单击停止/开始，它将移动起点:)

【解决方案6】：

<style type="text/css">
.scroll {
width:100%;
overflow:hidden;
position:relative;
}
 
.scrollingtext {
white-space:nowrap;
position:absolute;
}
</style>

<script type="text/javascript">
    $(document).ready(function () {
        $('.scrollingtext').bind('marquee', function () {
            marqueeFunction($(this), 'START');
        }).trigger('marquee');

        $('.scrollingtext').mouseover(function () {
            $(this).stop();
        });
        $('.scrollingtext').mouseout(function () {
            marqueeFunction($(this), 'RESUME');
        });
    });

    function marqueeFunction(ob, type) {
        // ========== HOROZONTAL ==========
        //                var tw = ob.width();
        //                var ww = ob.parent().width();
        //                if (type == 'START')
        //                    ob.css({ right: -tw });
        //                ob.animate({ right: ww }, 20000, 'linear', function () {
        //                    ob.trigger('marqueeX');
        //                });
        // ========== VERTICAL ==========
        var th = ob.height();
        var hh = ob.parent().height();

        if (type == 'START')
            ob.css({ bottom: -th });
        ob.animate({ bottom: hh }, 20000, 'linear', function () {
            ob.trigger('marquee');
        });
    }
</script>

<div class="scroll">
    <div class="scrollingtext">Some HTML to scroll as a marquee</div>
</div>

【讨论】：