Markieren Sie Bildrahmen mit Ajax-Anforderung

Question

Zuerst einige Visualisierung des Codes. Ich habe die folgenden Bilder, die sind dynamisch generiert von jquery. Sie sind auf Benutzeranforderung gemacht:

<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" /> 

Ich habe eine AJAX-Schleife, die alle 15 Sekunden mit jQuery wiederholt und es enthält den folgenden Code:

Hinweis: Die if-Anweisung innerhalb der Ajax-Schleife ist.

Dabei ist imgId die angeforderte ID aus dem Ajax-Aufruf.

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

} 

Es funktioniert gut, auch mit mehreren Bildern. Aber ich hatte das ursprünglich mit einem Bild verwendet.

Das Problem ist, ich brauche einen Interrupt. Etwas wie:

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

Es gibt zwei Probleme:

1.) Das ist offensichtlich beendet alle Animationen. Ich kann mir nicht vorstellen, wie ich etwas schreiben könnte, das nur die Animation des angeklickten Bildes stoppt.

2.) Der Ajax ruft IDs ab, manchmal erscheinen diese IDs alle paar Minuten mehr als einmal, was bedeutet, dass die Animationen übereinander abgespielt werden, wenn das Bild existiert. Ich könnte mit Hilfe herausfinden, wie man erkennt, ob eine Animation bereits auf einem Bild läuft, und nichts tun, wenn die Animation bereits auf einem Bild ausgelöst wird.

Answer 1

Sie können zwei Fliegen mit einer Klappe schlagen;)

1) Setzen Sie die stop Variable nicht verwenden. Fügen Sie jeder Klasse eine Klasse hinzu:

2) Das gleiche, überprüfen Sie die Klasse!

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