How to make multiple animation run in the same time?

Question

I am working on an looping animation, as you can see here: http://bit.ly/blinkingEyes

I have 2 sets animation functions, one make the eyes blink and the other to glow both of them work great independently, but when working together, the glow effect interrupt the blinking effect.

I read about custom queues and I believe this is the answer, but i could not make it work without making my browser to freeze.

Could you help you me understand of to do it?

update: I'm using jQuery 1.6

this is my jQuery file:

      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 has been updated to Sync animations and provide smoother animations, it should do the trick for you.

From the jquery blog....

---

Effects

Synced Animations

In jQuery you can have multiple animations running simultaneously (even multiple on the same element, animating different properties). In 1.6 we’ve introduced an enhancement that ensures that all animations are synced to the same timer interval. This had the potential to create problems before as animations could become slightly out-of-sync (even by a couple milliseconds) resulting in slightly “off” animations.

Smoother Animations

Additionally jQuery is now using the new requestAnimationFrame method provided by browsers to make our animations even smoother. We can use this functionality to avoid calling timers and instead depend upon the browser to provide the best possible animation experience. .promise()

Just like $.ajax() before it, $.animate() gets “deferred”. jQuery objects can now return a Promise to observe when all animations on a collection have completed: