Question

这对我不起作用......

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

});

Answer 1

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

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

其他错误就是这个：top:'-=80px'

首先尝试获得这样的当前位置然后添加位置：

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

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

Answer 2

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

看起来就像你想要做的那样。

Answer 3

检查插件：Fxqueues

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

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

我还没有找到当前版本的Jquery的Fxqueus版本，但是已经成功地使用了旧的Jquery版本。

Answer 4

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

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

Answer 5

使用queue()和dequeue()功能。这是一个直接从jQuery文档中获取的示例。

检查http://jsfiddle.net/j4SNS/

处的工作示例

Answer 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>

jQuery暂停/恢复动画

6 个答案:

检查http://jsfiddle.net/j4SNS/