jQuery 暂停/恢复动画

Posted 2023-05-08

【中文标题】jQuery 暂停/恢复动画

【英文标题】：jQuery Pause / Resume animate

【发布时间】：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 没有暂停/恢复功能，您可以使用插件或自己编写。

【参考方案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>