Question

假设我有两个自定义的animate函数，它由origin jquery animate函数组成：一个是摇动功能，从左到右摇动，然后以无限循环回转：

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)
            }

然后我一直为flash定义了flash动画功能：

    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)
    }

我希望元素同时执行两个动画，所以我使用queue：

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

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

但他们仍然先执行摇动，然后执行闪光灯

我如何同时执行它们？

以下是演示：http://jsfiddle.net/hh54188/SykMu/

Answer 1

可能是...... 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'));

如何同时执行几个jquery动画

1 个答案: