Search code examples
jqueryanimationsimultaneous

simultaneously execute multiple animate functions

I've been searching for the answer for my question for some time now, but can't find it. Hopefully you can help me.

Situation

I'm pretty new to Javascript + JQuery. So my knowledge is limited to what i can find on the internet (especially this site).

I'm trying to create a site which has an idea of changing tabs and i use jQuery's animate function to toggle through these tabs automatically. To make it look good, the browser needs to execute multiple animate functions at the same time.

Code

$(slider).animate({opacity: 0},setSpeedTime);
$(backslider).animate({opacity: 1},setSpeedTime);
$('.subdiv_' + lastNumber).animate({backgroundColor: '#FFF'},setSpeedTime);
$('.subdiv_' + imageNumber).animate({backgroundColor: '#F00'},setSpeedTime);
$("#" + colId).animate({borderColor: "#000"},setSpeedTime);
$("#" + lastColId).animate({borderColor: "#FFF"},setSpeedTime);
$("#" + colId).animate({opacity: "1"},setSpeedTime);
$("#" + lastColId).animate({opacity: "0.25"},setSpeedTime);

Explanation

slider and backslider are variables of a bannerdiv. These are laying on eachother and the new banner is getting visable through the other banner.

Next to the slider and backslider are 3 buttons, in which the class starts with subdiv_ and ends with the bannernumber (1,2 or 3). When clicked on this, the banner will immediately go to the corresponding banner.

colId is the new id of the column which is being shown.
lastColId is the id of the column which is currently being shown.

Problem

Now the problem. Almost every animate function is being run simultaneously, except for the last 2.

Effect

The banner is changing, the button of the current banner is changing color as well as the color of the old bannerbutton. The border of the old column is disappearing and the border of the new column is appearing.

This is all happening simultaneously, just as i want it to happen. But the text of the old column is staying very visable and the new column is staying transpirant. Only after all the other effects are finished the opacity of the text divs are changing too. So the text stays behind the other animations.

Questions

Why, and how can i solve it, so every animation runs at the same time? Is there a maximum number of animations which can be executed at the same time?

Tried

I've already tried using the queue option in animate, but setting all of the animation queue's on false gives me another wrong effect. The first two animate functions are being processed immediately without the duration option (it seems the duration is set to 0).

Solution

  • Almost every animate function is being run simultaneously, except for the last 2.

    Right. When you call animate multiple times on the same element, jQuery serializes the animations.

    Use a single animate call per element in order to run the effects on that element simultaneously:

    $("#" + colId).animate({
    borderColor: "#000",
    opacity: 1
},setSpeedTime);
$("#" + lastColId).animate({
    borderColor: "#FFF",
    opacity: 0.25
},setSpeedTime);

    Side note: Use numbers, not strings, with opacity.