How to Run Two Jquery Animations Simultaneously

How to run two jQuery animations simultaneously?

yes there is!

$(function () {
    $("#first").animate({
       width: '200px'
    }, { duration: 200, queue: false });

    $("#second").animate({
       width: '600px'
    }, { duration: 200, queue: false });
});

How to make multiple jQuery animations run at the same time?

Using queue:false. You can see the full docshere.

$(selector1).animate({
    height: '670'
}, {
    duration: 2000,
    queue: false,
    complete: function() { /* Animation complete */ }
});

$(selector2).animate({
    top: '670'
}, {
    duration: 2000,
    queue: false,
    complete: function() { /* Animation complete */ }
});

Docs:

.animate( properties, options ) version added: 1.0

---

properties A map of CSS properties that the animation will move toward.

options A map of additional options to pass to the method. Supported keys:

duration: A string or number determining how long the animation will run.

easing: A string indicating which easing function to use for the transition.

complete: A function to call once the animation is complete.

step: A function to be called after each step of the animation.

queue: A Boolean indicating whether to place the animation in the effects queue. If false, the animation will begin immediately. As of jQuery 1.7, the queue option can also accept a string, in which case the animation is added to the queue represented by that string.

specialEasing: A map of one or more of the CSS properties defined by the properties argument and their corresponding easing functions (added 1.4).

How can I execute multiple, simultaneous jquery effects?

Ok, so this is a very custom solution that combines the bounce and highlight effects. I'd rather see some kind of jquery support for combining these more easily, specifying {queue:false}, but I don't think it's that simple.

What I did was take the jquery.effects.bounce.js and jquery.effects.highlight.js (from jquery-ui-1.8rc3), and combine the code of the two as DaveS suggested, to create a new effect named "hibounce". In my testing, it supports all of the options of both, and they occur simultaneously. It looks great! I'm not a huge fan of solutions like this though, because of the maintenance factor. Anytime I upgrade jquery.ui, I'll have to update this file manually as well.

Anyway, here is the combined result (jquery.effects.hibounce.js)

(function($) {

$.effects.hibounce = function(o) {
    return this.queue(function() {
        // Highlight and bounce parts, combined
        var el = $(this),
            props = ['position','top','left','backgroundImage', 'backgroundColor', 'opacity'],
            mode = $.effects.setMode(el, o.options.mode || 'show'),
            animation = {
                backgroundColor: el.css('backgroundColor')
            };

        // From highlight
        if (mode == 'hide') {
            animation.opacity = 0;
        }

        $.effects.save(el, props);

        // From bounce
        // Set options
        var mode = $.effects.setMode(el, o.options.mode || 'effect'); // Set Mode
        var direction = o.options.direction || 'up'; // Default direction
        var distance = o.options.distance || 20; // Default distance
        var times = o.options.times || 5; // Default # of times
        var speed = o.duration || 250; // Default speed per bounce
        if (/show|hide/.test(mode)) props.push('opacity'); // Avoid touching opacity to prevent clearType and PNG issues in IE

        // Adjust
        $.effects.save(el, props); el.show(); // Save & Show
        $.effects.createWrapper(el); // Create Wrapper
        var ref = (direction == 'up' || direction == 'down') ? 'top' : 'left';
        var motion = (direction == 'up' || direction == 'left') ? 'pos' : 'neg';
        var distance = o.options.distance || (ref == 'top' ? el.outerHeight({margin:true}) / 3 : el.outerWidth({margin:true}) / 3);
        if (mode == 'show') el.css('opacity', 0).css(ref, motion == 'pos' ? -distance : distance); // Shift
        if (mode == 'hide') distance = distance / (times * 2);
        if (mode != 'hide') times--;

        // from highlight
        el
            .show()
            .css({
                backgroundImage: 'none',
                backgroundColor: o.options.color || '#ffff99'
            })
            .animate(animation, {
                queue: false,
                duration: o.duration * times * 1.3, // cause the hilight to finish just after the bounces (looks best)
                easing: o.options.easing,
                complete: function() {
                    (mode == 'hide' && el.hide());
                    $.effects.restore(el, props);
                    (mode == 'show' && !$.support.opacity && this.style.removeAttribute('filter'));
                    (o.callback && o.callback.apply(this, arguments));
                    el.dequeue();
                }
            });

        // Animate bounces
        if (mode == 'show') { // Show Bounce
            var animation = {opacity: 1};
            animation[ref] = (motion == 'pos' ? '+=' : '-=') + distance;
            el.animate(animation, speed / 2, o.options.easing);
            distance = distance / 2;
            times--;
        };
        for (var i = 0; i < times; i++) { // Bounces
            var animation1 = {}, animation2 = {};
            animation1[ref] = (motion == 'pos' ? '-=' : '+=') + distance;
            animation2[ref] = (motion == 'pos' ? '+=' : '-=') + distance;
            el.animate(animation1, speed / 2, o.options.easing).animate(animation2, speed / 2, o.options.easing);
            distance = (mode == 'hide') ? distance * 2 : distance / 2;
        };
        if (mode == 'hide') { // Last Bounce
            var animation = {opacity: 0};
            animation[ref] = (motion == 'pos' ? '-=' : '+=')  + distance;
            el.animate(animation, speed / 2, o.options.easing, function(){
                el.hide(); // Hide
                $.effects.restore(el, props); $.effects.removeWrapper(el); // Restore
                if(o.callback) o.callback.apply(this, arguments); // Callback
            });
        } else {
            var animation1 = {}, animation2 = {};
            animation1[ref] = (motion == 'pos' ? '-=' : '+=') + distance;
            animation2[ref] = (motion == 'pos' ? '+=' : '-=') + distance;
            el.animate(animation1, speed / 2, o.options.easing).animate(animation2, speed / 2, o.options.easing, function(){
                $.effects.restore(el, props); $.effects.removeWrapper(el); // Restore
                if(o.callback) o.callback.apply(this, arguments); // Callback
            });
        };
        el.queue('fx', function() { el.dequeue(); });
        el.dequeue();
    });
};

})(jQuery);

It can be used like any other effect now:

var el = $("#div1");
el.effect("hibounce", {color: "#F00", times: 5}, 100);

end two jquery animations simultaneously

If you want to forcibly end them, use the .stop() method.

jQuery('#maindiv, .sidediv').stop();

Is there any way to make two jQuery animations run (properly) simultaneously?

There was a recent disussion about this exact topic on the jQuery dev list. They created a few test cases you might wanna look at. Specially the Johns test.

Here's the discussion topic btw.

how to animate two things at the same time in jquery

You can just run them in a row, like this:

$("#trigger").hover(function() {
   $("#box1").stop().animate({ backgroundColor: '#000000' });
   $("#box2").stop().animate({ top: "-20px" });
}, function() {
   $("#box1").stop().animate({ backgroundColor: '#FFFFFF' }); //set it back
   $("#box2").stop().animate({ top: "0px" });                 //set it back
});

This uses .hover() to animate one way when hovering, and animate them back when leaving. The .stop() is just to prevent animation queue build-up. To animate a color, you'll need either the color plugin, or jQuery UI included as well.

Animations in jquery, .animate(), are implemented using setInterval() with a 13ms timer, so they'll happen outside the normal flow...doing them like above doesn't wait for the first to finish, they'll run simultaneously.

---

Related Topics