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以外のすべてのアニメーションが停止します。これはまったく役に立ちますか？

于 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 に答える