Question

First, some visualization of the code.
I have the following images that are dynamically generated from jquery. They’re made upon user request:

<img id="i13133" src="someimage.jpg" />
<img id="i13232" src="someimage1.jpg" />
<img id="i14432" src="someimage2.jpg" />
<img id="i16432" src="someimage3.jpg" />
<img id="i18422" src="someimage4.jpg" />

I have an AJAX loop that repeats every 15 seconds using jQuery and it contains the following code:

Note: The if statement is inside the Ajax loop.

Where imgId is the requested ID from the Ajax call.

//Passes the IDs retrieved from Ajax, if the IDs exist on the page the animation is triggered.
if ( $('#i' + imgId ).length )
{

var pickimage = '#i' + imgId;

var stop = false;

function highlight(pickimage) {
   $(pickimage).animate({color: "yellow"}, 1000, function () {
      $(pickimage ).animate({color: "black"}, 1000, function () {
         if (!stop) highlight(pickimage);
      });
   });
}

// Start the loop
highlight(pickimage);

}

It works great, even with multiple images. But I had originally used this with one image.

The problem is I need an interrupt. Something like:

$(img).click(function () {
   stop = true;
});

There’s two problems:

1.)This obviously stops all animations. I can’t wrap my head around how I could write something that only stops the animation of the image that’s clicked.

2.)The Ajax retrieves IDs, sometimes those IDs appear more than once every few minutes, which means it would repeat the animations on top of each other if the image exists. I could use some help figuring out how to detect if an animation is already running on an image, and do nothing if the animation is already triggered on an image.

Answer 1

You can hit two birds with one stone 😉

1) Don’t use the stop variable. Add a class to each img:

// Instead of: var stop = false;
$(pickimage).addClass("animating");

// Instead of: if (!stop) highlight(pickimage);
if ($(pickimage).hasClass("animating")) highlight(pickimage);

// Instead of: $(img).click(function () { stop = true; });
$(img).click(function () { $(this).removeClass("animating"); });

2) Same thing, check the class!

if ($(pickimage).hasClass("animating")) return;