Question

所以我在后台有几套动画。但是，在用户动画期间，我想暂停所有其他动画，以便浏览器可以呈现用户最需要的内容。

Element.mousein()  --> Pause (NOT STOP) all animations except those related to Element
                       i.e. $(body).not(Element).pauseAnimations();
Element.mouseout() --> Resume all animations
                       i.e. $(body).not(Element).resumeAnimations();

像http://tobia.github.com/Pause/这样的东西，但是暂停除了悬停的那些之外的所有其他的。

Answer 1

这对用户来说很难使用，因为他/她应该按照移动的盒子来保持它的徘徊。但是，定位以外的动画当然会更有用。

无论如何，这是官方Pause插件demo on jsFiddle的修改版本。

setupBox()函数中应该执行的操作是：

function setupBox(i) {
    var $box = $('#box' + i);

    function phase1() {
        $box.animate({left: 100}, 1000, 'swing', phase2);
    }

    function phase2() {
        $box.animate({left: 0}, 1000, 'swing', phase1);
    }

    // This pauses rest of the boxes except the targeted. 
    // I added a class ('box') to each element to easily select all boxes. 
    // You could also do: $('.demo').children() since all the children are boxes.
    function pauseRest() {
        $('.box').not('#box' + i).pause(); 
        $box.resume();
    }

    $box.hover(function () {
        pauseRest($box);
    }, function () {
        $('.box').resume();
    });
    phase1();
}

Answer 2

您可以使用stop()在需要时停止动画。

Answer 3

使用stop（）的问题你必须指定每个动画手册，但我刚刚发现this (link)显然允许停止所有当前的动画。

$("button").click($.fx.off)

好的，上面的解决方案没有任何好处，因为你说它是一般选择器。

$("div:animated").not('#AnimationYouWantToContiune').stop();

请看这个fiddle我设法添加了3个动画的div，当点击一个按钮时，它将停止除动画之外的所有指定div。这有帮助吗？

Answer 4

像你拥有它一样使用jQuery ......

jQuery有选择器：未描述here

这是一个暂停插件的例子，暂停其他元素而不是悬停的元素;

<html>
    <head>
        <link rel='stylesheet' href='http://tobia.github.com/Pause/style.css'>
        <script src='http://tobia.github.com/Pause/jquery-1.4.2.min.js'></script>
        <script src='http://github.com/tobia/Pause/raw/master/jquery.pause.min.js'></script>
    </head>
    <body>
        <div class="demo">
            <div id="box1" class="boxy"></div>
            <div id="box2" class="boxy"></div>
            <div id="box3" class="boxy"></div>
        </div>
        <script type="text/javascript">
            $(function() {
                $(".boxy").each(function(){
                    $(this).hover(function() {
                        var id = $(this).attr("id");
                        $(":not(#" + id + ")").pause();
                    }, function() {
                        var id = $(this).attr("id");
                        $(":not(#" + id + ")").resume();
                    });
                    setupBox($(this));
                });
                function setupBox(elem) {
                    function phase1() {
                        elem.animate({ left: 450 }, 2000, 'swing', phase2);
                    }
                    function phase2() {
                        elem.animate({ left: 0 }, 2000, 'swing', phase1);
                    }
                    phase1();
                }
            });
        </script>
    </body>
</html>

Answer 5

您可以使用 delay() 函数来延迟队列中项目的执行，但这不是首选方法。

如果可以，您应该使用animate()方法中的回调函数。

在用户激活的动画（jquery）期间暂停所有背景动画

5 个答案: