jquery actions happen at once, not in a series

[ggalan]

how can i make the actions happen all together at the same time, not in a series
for instance this code will show the balloon first which takes 100th of a second then go to the next list
i want this list to happen at once

$("li.il2, li.sw2").click(function () {
	  $("#balloon").show(100);
	  $("li.il2").animate({backgroundPosition: '0 -17px'})
  });

[jscheuer1]

I think the best you can do is try running the animation without putting it in the queue:

$("li.il2, li.sw2").click(function () {
	  $("#balloon").show(100);
	  $("li.il2").animate({backgroundPosition: '0 -17px'}, {queue: false})
  });

For (a little) more info see .animate( properties, options ) on the jQuery API manual page for animation:

http://api.jquery.com/animate/

[ggalan]

queue, thank will look into it
but how do you get rid of queue in something like this?

$("#balloon").show(100);

[jscheuer1]

By my reading of the manual, in the code as you have it, that begins the queue. If all subsequent animation type commands use the .animate() with queue: false, then you need not bother with removing the .show(100) from the queue. None of the subsequent animations will respect its queue.

Alternatively, you could break .show(100) into its component parts and make it a .css().animate() with queue: false.

Or, if it works like I think it says it will, do:

$("#balloon").dequeue().show(100);

see:

http://api.jquery.com/dequeue/

Be careful though when taking things out of queue. Too many animations at once will cause problems on some systems. Sometimes it's not the fact that a queue exists that is messing up your intended effect, rather the order in which your choosing to do the effects in.

[ggalan]

i see, .dequeue() didnt do it for me on this but will keep this in mind

thanks again!

[jscheuer1]

Well, as I said, if the show(100) comes first, it shouldn't matter if it goes into the queue or not. There should be no queue yet.

With jQuery though it's helpful to play around. The order in which things are done often plays a role. The dequeue() function may only effect the queue for the selected element(s). If so, you may have to include the other elements that you will be animating later and exclude them for the .show() - something like:

$("li.il2").animate({backgroundPosition: '0 -17px'}, {queue: false});
$("li.il2, #balloon").dequeue().filter("#balloon").show(100);

Or:

$("li.il2, #balloon").dequeue().filter("#balloon").show(100);
$("li.il2").animate({backgroundPosition: '0 -17px'}, {queue: false});

Or various other possibilities, here's one:

$("li.il2").animate({backgroundPosition: '0 -17px'}, {queue: false});
$("li.il2").dequeue();
$("#balloon").show(100);

Also, from the dequeue man page's comments section:

. . . The information to be gained by reading this vague piece of documentation confines itself to the mere fact that there is a method called .dequeue(), which can be used to alter the effect chaining behavour.
I had to take a look at the jQuery source to understand what it is actually good for.

Perhaps you should. When I have more time I probably will.

[ggalan]

nice, thanks as lot!