Как запустить несколько анимаций одновременно?

Question

Я работаю над цикличной анимацией, как вы можете видеть здесь: http://bit.ly/blinkingEyes

У меня есть 2 набора функций анимации, один заставляет глаза мигать, а другой светится, оба они прекрасно работают независимо друг от друга,но при совместной работе эффект свечения прерывает мигающий эффект.

Я читал о пользовательских очередях и считаю, что это ответ, но я не смог бы заставить его работать, не заставив мой браузер зависнуть.

Не могли бы вы помочь мне понять, как это сделать?

обновление: я использую 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, чтобы наблюдать, когда все анимации в коллекции завершены: