JQuery looping .mouseenter animation does not stop

I'm having trouble getting an animation to stop playing on jQuery .mouseleave, sometimes the animation stops and sometimes not, once it fails to stop it is unstoppable and does not respond to .mouseleave events. All other animations are fine, this one is the only one with a loop and is clearly wrong somewhere.

The IDs are dynamically assigned (Wordpress posts) so I'm referencing up the object hierarchy using .parents('.someClassName:first') and then down using .find('findThisClass').

Can anyone see why开发者_Python百科 it is not working? Or have a better suggestion how to do it. My code is...

// Call this function from below
function pulsate(myObject) {
    myObject
    .parents('.index-post:first') // Find closest parent
    .find('div.play-arrow') // Find child div to animate
    .css({
        visibility: "visible",
        opacity:0
    })
    .fadeTo(500, 1)
    .fadeTo(500, 0, function (){
            pulsate(myObject); // Loop the animation
        }
    );
}

jQuery("#index div.index-post") // The nearest parent with an ID  
.find("a") // Find the link
.mouseenter(function(){
    var $self=jQuery(this);
    pulsate($self); // Call function defined above
})
.mouseleave(function(){
    jQuery(this)
    .parents('.index-post:first') // Find closest parent
    .find('div.play-arrow') // Find child div to animate
    .stop()
    .fadeTo(500, 0);
});

You are starting the animation on an element but you try to stop the animation on the element. Try calling stop directly instead:

.mouseleave(function(){
  jQuery(this)
    .stop()
    .parents('.index-post:first') // Find closest parent
    .find('div.play-arrow') // Find child div to animate
    .fadeTo(500, 0);
});

I think the problem may be in the pulsate method. The second call to fadeTo will start before the first call ends. I would put the second call as the callback event like this:

.fadeTo(500, 1,
.fadeTo(500, 0, function (){
        pulsate(myObject); // Loop the animation
    }
));

Solved. Unfortunately the solutions above didn't work. I solved it by following this post. I need to tidy it up but the solution is below. I'm going to read up quickly on jQuery .live because it appears to hold the answer why nothing else worked.

// Play button animation
var timerID;
jQuery("#index div.index-post")
.find("a")
.live('mouseover mouseout', function(event) {
    var self = jQuery(this);
    if (event.type == 'mouseover') {
        self
        .parents('.index-post:first')
        .find('div.play-arrow')
        .css({
            visibility: "visible",
            opacity:0
        })
        .fadeTo(500, 1)
        .fadeTo(500, 0);
        timerID = setInterval(function() {
            self
            .parents('.index-post:first')
            .find('div.play-arrow')
            .fadeTo(500, 1)
            .fadeTo(500, 0);
        }, 1000);
    }
    else {
        self
        .parents('.index-post:first')
        .find('div.play-arrow')
        .stop(true, true)
        .fadeTo(500, 0);
        clearInterval(timerID);
    }
});