jquery - 如何同时执行几个jquery animate

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

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

            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'));