multiple jquery effects multiple times at specific timing

Question

I've got this piece of code:

$("#au").click(function(){
    $("#sca").delay(18625).effect("bounce","highlight",2000);
    $("#scb").delay(26520).effect("bounce","highlight",2000);
    $("#scc").delay(30884).effect("bounce","highlight",2000);
    $("#scd").delay(34901).effect("bounce","highlight",2000);
    $("#sce").delay(39000).effect("bounce","highlight",2000);
    $("#scf").delay(44000).effect("bounce","highlight",2000);
    $("#scg").delay(45000).effect("bounce","highlight",2000);
    $("#sca").delay(51000).effect("bounce","highlight",2000);
    $("#scb").delay(52000).effect("bounce","highlight",2000);
    $("#scc").delay(53000).effect("bounce","highlight",2000);
    $("#scd").delay(55000).effect("bounce","highlight",2000);
    $("#sce").delay(56000).effect("bounce","highlight",2000);
    $("#scf").delay(57300).effect("bounce","highlight",2000);
    $("#scg").delay(61403).effect("bounce","highlight",2000);
    $("#sca").delay(67500).effect("bounce","highlight",2000);
    $("#scb").delay(68200).effect("bounce","highlight",2000);
    $("#scc").delay(69200).effect("bounce","highlight",2000);
    $("#scd").delay(71400).effect("bounce","highlight",2000);
    $("#sce").delay(72300).effect("bounce","highlight",2000);
    $("#scf").delay(73000).effect("bounce","highlight",2000);
    $("#scg").delay(77500).effect("bounce","highlight",2000);
    $("#au-sca").get(0).play();
});

Problem is, only bounce is working, not highlight (that isn't such a pity, it's just a wish). And the second and third 'loops' are not triggering at correct times, but like a minute or so later. Is there any known an proven way to overcome these 2 obstacles & make the code less obtrusive in the mean time?

Well, it's an 'animation' in sync with a song, but I can't put it up online. — rudolf, Nov 07 '12 at 19:14
@user1718397: You don't have to put the whole thing online, just enough to demonstrate the problem you are having. Beside, I think you'll find Darrrrrren (or however many r's that's supposed to be) below has your answer. `effect` doesn't allow you to use multiple effects at once. — Matt Burland, Nov 07 '12 at 19:23

score 1 · Accepted Answer · edited May 23 '17 at 11:56

As far as I know, the jQuery UI effect function only takes one effect at a time - thus the second parameter you are specifying is actually being interpreted as an option that (obviously) doesn't exist.

Your issue is similar to this question, where the answer actually combines the very two effects you are attempting to combine. I believe the answer to that question is exactly what you'll need.

multiple jquery effects multiple times at specific timing

1 Answers1