How can I execute multiple, simultaneous jquery effects?
I am animating some error/validation elements on a page. I want them to bounce and be highlighted, but at the same time if possible. Here's what I'm currently doing:
var els = $(".errorMsg");
els.effect("bounce", {times: 5}, 100);
els.effect("highlight", {color: "#ffb0aa"}, 300);
This causes the elements to first bounce, and THEN be highlighted, and I'd like them to occur simultaneously. I know that with .animate() you can specify queue:false in the options, but I don't want to use animate because the pre-built effects "bounce" and "highlight" are exactly what I want.
I have tried simply chaining the calls like els.effect().effect(), and that doesn't work. I've also tried to put queue:false in the options object I pass in, and that doesn't work.
Answer
jQuery UI will queue the effects by default. Use dequeue() to run simultaneously:
var opt = {duration: 7000};
$('#lbl').effect('highlight', opt).dequeue().effect('bounce', opt);