如何让多个动画同时运行？

Question

我正在制作循环动画，您可以在此处看到：http://bit.ly/blinkingEyes

我有两套动画功能，一套让眼睛眨眼，另一套让眼睛发光，这两个功能独立工作很好，但是当一起工作时，发光效果会打断眨眼效果。

我阅读了有关自定义队列的信息，我相信这就是答案，但如果不让我的浏览器冻结，我就无法让它工作。

你能帮我理解一下吗？

更新：我使用的是 jQuery 1.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()
        })
    }

Answer 1

Jquery 1.6 已更新为同步动画并提供更流畅的动画，它应该可以为您解决问题。

来自 jquery 博客....

---

效果

同步动画

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

更流畅的动画

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

就像之前的 $.ajax() 一样，$.animate() 被“延迟”了。 jQuery 对象现在可以返回一个 Promise 以观察集合上的所有动画何时完成：