0

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

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/而是暂停所有其他的，除了悬停的那个。

4

5 回答 5

2

这对用户来说很难使用，因为他/她应该跟随一个移动的盒子来让它保持悬停。但是除了定位之外的动画当然会更有用。

无论如何，这里是jsFiddle 上官方 Pause 插件演示的修改版本。

你应该在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();
}
于 2013-01-24T12:17:49.017 回答
1

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

于 2013-01-07T23:41:47.667 回答
1

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

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

好的，上面的解决方案并不好，因为你说它是一个通用的选择器。

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

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

于 2013-01-07T23:42:44.197 回答
1

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

jQuery 有选择器：这里没有描述

这是一个暂停插件的例子，它可以暂停其他元素而不是悬停的元素；

<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>
于 2013-01-25T10:54:16.127 回答
0

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

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

于 2013-01-07T23:40:24.090 回答