How can I execute multiple, simultaneous jquery effects?

Question

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 1

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);   

Demo in JsFiddle