Question

Well, this is the exact opposite problem that I normally have with Javascript synchronicity issues.

This time, I have a jQuery animation running for 10 seconds: Actually, quite a few of them. I know it is bloated!

function spectrum() { 
    hue = (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 128)) + ',' + (Math.floor(Math.random() * 256));  
    $('#dubious').animate({boxShadow: "0px 0px 300px rgba(" + hue + ", 0.8) inset"}, 10000);
    $('.strip').animate({borderColor: "rgba(" + hue + ", 0.25)"}, 10000);
    $('.element').animate({boxShadow: "0px 0px 400px rgba(" + hue + ", 0.45)"}, 10000);
    $('#outer_container').animate({borderColor: "0px 0px 400px rgba(" + hue + ", 0.45)"}, 10000);
    $('#dubious_box').animate({boxShadow: "0px 0px 40px rgba(" + hue + ", 1)"}, 10000, function() {spectrum();});
}

.. basically, it picks a random color, and then each of these elements transitions to that hue over 10 seconds.

Again, probably too bloated to be terribly practical, but its just SO COOL LOOKING..

Anyway, the real problem child is here.

You’ll notice, if you click one of the images in the top row (don’t try clicking the rest, that’s another issue i’m hammering out), and wait for about ten seconds, you’ll get a popup with a blown-up version of the picture. Then click the picture again, and wait ten more seconds, and it’ll finally blink out like a TV.

Anyway, the click event:

$(".gallery_image").click(function() {
        $("#blowup").attr('src',$(this).attr('src'));
        $("#outer_container").animate({opacity: "1", height: "500"});
    });

When I turn off the spectrum() loop, the problem goes away.

Thanks for taking a look 😀

Answer 1

The following code works well, combining insight and code from both @nnnnnn and @Praveen.

The code is for a gallery that has a looping color-changing animation in the background (When a user clicks a thumbnail, the animation in the background has to stop, the click action takes place, and the background animation kicks in again. The same happens when a user clicks the image or presses Esc to close the image.

The following code is where all looping background animation animations running on the page (4) stop, then ends one more animation (outer_container) before adding a new animation to its queue.

After all that, I must ask:

Is it possible to end all animation on all items with a single line of jQuery? would this be more or less efficient than stopping them all independently?

$(".gallery_image").click(function() {
        $('#dubious').stop(true); //end all active animations --v
        $('.strip').stop(true);
        $('.element').stop(true);
        $('#dubious_box').stop(true); // --^
        $("#blowup").attr('src',$(this).attr('src'));
        $("#outer_container").stop(true).animate({opacity: "1", height: "500"},
        function() { //callback
            spectrum();
        });
    });

    $('#blowup').click(function() {
        $('#dubious').stop(true); //end all active animations --v
        $('.strip').stop(true);
        $('.element').stop(true);
        $('#dubious_box').stop(true); // --^
        $("#outer_container").stop(true).animate({opacity: "0", height: "0"})
    });