Jquery 如何使多个动画同时运行？

我正在制作一个循环动画，你可以在这里看到：

我有两套动画功能，一套使眼睛眨眼，另一套使眼睛发光，这两种功能独立工作，但当一起工作时，发光效果会中断眨眼效果

我读过关于自定义队列的文章，我相信这就是答案，但如果不让浏览器冻结，我就无法让它工作

你能帮我了解一下怎么做吗

更新：我正在使用jQuery1.6

这是我的jQuery文件：

      jQuery.fx.interval = 24;

    $(function(){

        /* -----------------------  #eyes1: blinking and glowing  ------------------*/
        /* ----------------------------- (glowing is defined below) ---------------*/

        $('#eyes1 .eye_set1').blink({
                                    frameStop: 5,
                                    endDelay: 4000,
                                    frameHeight: 40,
                                    frameDelay: 100,
                                    framePos: 0
                                    });

        $('#eyes1 .eye_set2').blink({
                                    frameStop: 3,
                                    endDelay: 4000,
                                    frameHeight: 40,
                                    frameDelay: 100,
                                    framePos: 0
                                    });

        $('#eyes1 .eye_set3').blink({
                                    frameStop: 10,
                                    endDelay: 5000,
                                    frameHeight: 30,
                                    frameDelay: 120,
                                    framePos: 0
                                    });

        /* -----------------------  #eyes2: only blinking   ------------------ */

        $('#eyes2 .eye_set1').blink({
                                    frameStop: 5,
                                    endDelay: 4000,
                                    frameHeight: 40,
                                    frameDelay: 100,
                                    framePos: 0
                                    });

        $('#eyes2 .eye_set2').blink({
                                    frameStop: 3,
                                    endDelay: 4000,
                                    frameHeight: 40,
                                    frameDelay: 100,
                                    framePos: 0
                                    });

        $('#eyes2 .eye_set3').blink({
                                    frameStop: 10,
                                    endDelay: 5000,
                                    frameHeight: 30,
                                    frameDelay: 120,
                                    framePos: 0
                                    });


/* ---- make each child of #eyes1 to glow ------ */

var d = 250;
    $('#eyes1').children().each(function(){
            var thisDelay = Math.floor(Math.random()*1160)
            $(this).delay(thisDelay).animateLoop({
                                params_A: {opacity: 0.6},
                                params_B: {opacity: 1},
                                       duration_A: 800,
                                       duration_B: 800
                                 });
        })

    })




/* ---- animateLoop: make the glowing effect ------ */

    $.fn.animateLoop = function(options) {
        var defaults = {
            params_A: {opacity: 0.6},
            params_B: {opacity: 1},
            duration_A: 800,
            duration_B: 800
        }
        var options = $.extend(defaults, options)

        var $this = this

        function animateLoopSet() {
                $this.animate(options.params_A, {duration:options.duration_A, easing:"easeInOutSine"})
                     .animate(options.params_B, {duration:options.duration_B, easing:"easeInOutSine", complete: function(){animateLoopSet()} })
        }

        animateLoopSet()
        return this
    }



/* ---- animateLoop: make the blinking effect ------ */

    $.fn.blink = function(options) {

        var defaults = {
            frameStop: 5,
            endDelay: 4000,
            frameHeight: 40,
            frameDelay: 100,
            framePos: 0
        }

        var options = $.extend(defaults, options)

        return this.each(function(){
        var $this = $(this)
        var countBlink = 0;

        function blinkSet() {
            if(countBlink <= options.frameStop) {
            countBlink++
            $this.queue(function(next){
                                $this.delay(options.frameDelay)
                                blinkFrame();
                                next();
                            })
            .queue(function(next){
                blinkSet()
                next();
                })
            } else {
                countBlink = 0;
                $this.queue(function(next){
                    $this.delay(options.endDelay)
                    blinkSet()
                    next();
                })
            }
        }

        function blinkFrame(backword){
            options.framePos -= options.frameHeight
            $this.css({backgroundPosition: '0 ' + options.framePos + 'px'})
            }

        blinkSet()
        })
    }

jQuery.fx.interval=24；
$（函数（）{
/*------------------------------眼睛1：闪烁发光------------------*/
/*------------------------------（发光定义如下）---------------*/
$（'#眼睛1.眼睛设置1'）。眨眼({
帧停止：5，
延时：4000，
帧高：40，
帧延迟：100，
帧位置：0
});
$（'#眼睛1.眼睛设置2'）。眨眼({
帧停止：3，
延时：4000，
帧高：40，
帧延迟：100，
帧位置：0
});
$（'眼睛1.眼睛3'）。眨眼({
帧停止：10，
延后：5000，
帧高：30，
帧延迟：120，
帧位置：0
});
/*------------------------------眼睛2：只眨眼----------------*/
$（'眼睛2.眼睛设置1'）。眨眼({
帧停止：5，
延时：4000，
帧高：40，
帧延迟：100，
帧位置：0
});
$（'#eyes2.eye_set2'）。眨眼({
帧停止：3，
延时：4000，
帧高：40，
帧延迟：100，
帧位置：0
});
$（'眼睛2.眼睛3'）。眨眼({
帧停止：10，
延后：5000，
帧高：30，
帧延迟：120，
帧位置：0
});
/*----让每个孩子的眼睛发光----*/
var d=250；
$（'#eyes1'）.children（）.each（function（））{
var thisDelay=Math.floor（Math.random（）*1160）
$（this）.delay（thisDelay）.animateLoop({
参数A:{opacity:0.6}，
参数B:{opacity:1}，
时长(A):800,，
持续时间：800
});
})
})
/*-----animateLoop：生成发光效果------*/
$.fn.animateLoop=函数（选项）{
var默认值={
参数A:{opacity:0.6}，
参数B:{opacity:1}，
时长(A):800,，
持续时间：800
}
var options=$.extend（默认值，选项）
var$this=this
函数animateLopSet（）{
$this.animate（options.params_A，{duration:options.duration_A，easeInOutSine}）
.animate（options.params_B，{duration:options.duration_B，easeInOutSine]，complete:function（）{animateLoopSet（）}）
}
animateLopSet（）
还这个
}
/*-----animateLoop：产生闪烁效果------*/
$.fn.blink=功能（选项）{
var默认值={
帧停止：5，
延时：4000，
帧高：40，
帧延迟：100，
帧位置：0
}
var options=$.extend（默认值，选项）
返回此值。每个（函数（）{
变量$this=$（this）
var-countBlink=0；
函数集（）{
如果（countBlinkJquery 1.6已经更新为同步动画并提供更平滑的动画，那么它应该可以帮到你

从jquery博客


效果

同步动画

在jQuery中，您可以同时运行多个动画（甚至在同一元素上运行多个动画，设置不同属性的动画）。在1.6中，我们引入了一个增强功能，确保所有动画都同步到相同的计时器间隔。这可能会在以前造成问题，因为动画可能会稍微不同步（甚至是几毫秒）会导致轻微的“关闭”动画

更平滑的动画

此外，jQuery现在使用浏览器提供的新requestAnimationFrame方法使动画更加流畅。我们可以使用此功能避免调用计时器，而是依靠浏览器提供最佳的动画体验。
.承诺

就像前面的$.ajax（）一样，$.animate（）会被“延迟”.jQuery objects现在可以返回一个承诺，在集合上的所有动画完成后观察：
你能修复可怕的代码格式吗！？感谢你提供的信息，Blowsie，我更新到了1.6，但我的问题似乎还有其他原因。没问题，如果你能将所有代码添加到jsfiddle.net并发布在这里，我会查看它适合你。