Stop propagation is not stopping propagation, or so it seems.

Stop propagation is not stopping propagation, or so it seems.

How do I tell jQuery to do this, and then if a link is clicked, do that?

With the code that follows, I have a small animation that runs when the page is loaded, wherein several images fade in consecutively with a small time lapse in between. Then, there is a directive to make a css z-index change to an image when it's corresponding link is clicked. Here is what I have:

  1.     $(document).ready(function(e) {
            $("div.box").each(function ( i) {
                var div = $(this);
                setTimeout(function () {
                    div.fadeIn(800);
                }, i * 800)
            });
        });
        $("div.box").css('z-index','1');
        $("a.imp").click(function(){$(this).parents("div").css('z-index','2')})








The animation that is supposed to run on document load runs every time the link is clicked.

I have tried applying .stop(), .stopPropagation(), and .stopImmediatePropagation() chained on to the last line of code. None of them work. The bit of code always repeats the animation requested in the document ready section. I can't figure out why it executes again the contents of the document ready code after it runs the click function on the last line.

I want to say, run animation first, and not again unless asked. And after the animation, if the client clicks on a link, make the given change in the css value z-index for that image.

What it does is run the animation, then if I click a link, it makes the appropriate css change, and immediately re-runs the animation. I don't want it to re-run the animation.

Also, I am doing everything on $("div.box"), but don't want to keep recreating that object. But I haven't been able to save that object to a variable for reuse, and have the initial animation still work.

Please help.