在用户激活动画期间暂停所有背景动画(jquery)

Pause all background animation during user-activated animation (jquery)

本文关键字：动画 背景 jquery 暂停 用户 激活      更新时间：2023-09-26

所以我有几组动画在后台运行。但是，在用户动画期间，我希望暂停所有其他动画，以便浏览器可以呈现用户需要的最佳效果。

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

这对用户来说很难使用，因为他/她应该跟随移动的盒子保持它悬浮。但是比起定位，动画当然更有用。

无论如何，这里是一个修改版本的官方暂停插件演示在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();
}

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

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

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

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

请看看这个小提琴我设法添加3div是动画，当点击一个按钮，它会停止所有，但指定的div从动画。这有帮助吗?

你可以在需要的时候使用stop()来停止动画

像自己拥有它一样使用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>

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

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

相关文章：