2

元のjqueryアニメーション関数によって構成される2つの自己定義アニメーション関数があるとします.1つはシェイク関数で、左から右にシェイクし、無限ループで戻ります:

var leftright = function (el) {
                var duration = 800;
                var interval = duration * 4;
                var shake = function () {
                    el.animate({'left': '-=15'  }, duration)
                        .animate({'left': '+=15'  }, duration)
                        .animate({'left': '+=15'  }, duration)
                        .animate({'left': '-=15'  }, duration)
                }

                shake();
                setInterval(function () {
                    shake();
                }, interval)
            }

次に、フラッシュのフラッシュアニメーション関数を常に定義しました。

    var flash = function (el) {
        var duration = 300;
        var interval = duration * 2;
        var f = function () {
            el.animate({'opacity': 0}, duration)
                .animate({'opacity': 1}, duration)                    
        }
        f();
        setInterval(function () {
            f();
        }, interval)
    }

要素に 2 つのアニメーションを同時に実行させたいので、キューを使用します。

            var que = $({});
            que.queue('leftright', function () {
                leftright($('#el'));    
            }).dequeue('leftright');

            que.queue('flash', function () {
                flash($('#el'));    
            }).dequeue('flash');

ただし、最初にシェイクを実行してからフラッシュを実行します

それらを同時に実行するにはどうすればよいですか？

これがデモです：http://jsfiddle.net/hh54188/SykMu/

4

1 に答える 1

0

かもしれません... http://jsfiddle.net/u7bgs

このjsの代わりに：

var que = $({});
que.queue('leftright', function () {
   leftright($('#el'));    
}).dequeue('leftright');

que.queue('flash', function () {
   flash($('#el'));    
}).dequeue('flash');

それを試すには：

$('#parent').wrap("<div class='wrapper'></div>");
leftright($('.wrapper:has(#parent)'));

flash($('#parent'));
于 2012-06-29T17:35:20.243 に答える