Question

Here is my situation. I’m trying to do several animations on a single element at once; however, with the UI thread ‘feature’ and JQuery’s animation queue it’s becoming a hassle.

I’m designing a re-usable control library for a site and one of the things I wanted to do was to have a multi-class attribute system to initiate different animations upon ready().

For instance:

<div class="fadein loadingbar"></div>

with the CSS for an image background for .loadingbar, and then JQuery to animate the loading-bar’s background indefinitely:

$(".loadingbar").each(function(){
            $(this).css({backgroundPosition:"0px 0px"});
            $(this).animate({backgroundPosition:"(-65px 0px)"}, (($(this).height() / 35) * 2000) + 600, "linear", function(){_n3_animLoadBars(this)});
        });

as well as the fadeIn() animation for the .fadein class:

$(".fadein").each(function(){
       $(this).css({opacity:0,visibility:"visible"})
       .animate({opacity:1}, {duration:1000});
    });

However; the only way to get them to animate asynchronously is to do {queue:false} for the .animate() function, which works fine until I want to delay the fade-in animation:

$(".fadein").each(function(){
           $(this).css({opacity:0,visibility:"visible"})
           .delay(800)
           .animate({opacity:1}, {duration:1000,queue:false});
        });

which completely skips the .delay() call since it’s not queued (therefore not placing the animation cue right after the delay on the fx stack).

The only fix is to wrap the div with another div:

<div class="fadein"><div class="loadingbar"></div></div>

and to take the {queue:false} out, of course.

---

While this works, the javascript was supposedly going to be advanced enough so the markup didn’t have to be that messy (usually a simple div wrap like that is fine with me, but I’m designing this for my own personal amusement and I would like to keep it down to a single div if at all possible).

Any quick fix with JQuery that I am missing, or is there a way to do this through writing a plugin?

Any insight would be helpful!

Answer 1

Found the solution – it was easier than I thought.

Instead of specifying {queue:false} on the fade-ins, I specified it on the background animations, leaving the fade-ins queued.