JQuery зацикливание .mouseenter анимация не останавливается

Question

У меня проблемы с получением анимации для остановки воспроизведения на jQuery .mouseleave, иногда анимация останавливается, а иногда нет, если ее не остановить, ее невозможно остановить и она не отвечает на события .mouseleave. Все остальные анимации в порядке, эта единственная с циклом и где-то явно не так.

Идентификаторы назначаются динамически (сообщения Wordpress), поэтому я обращаюсь к иерархии объектов с помощью .parents('.someClassName:first'), а затем с помощью .find('findThisClass').

Кто-нибудь может понять, почему он не работает? Или есть лучшее предложение, как это сделать. Мой код ...

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

Answer 1

Я думаю, что проблема может быть в методе пульсаций.Второй вызов fadeTo начнется до того, как закончится первый вызов.Я бы поставил второй вызов как событие обратного вызова, например:

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

Answer 2

решаемая. К сожалению, приведенные выше решения не сработали. Я решил это, следуя этому посту . Мне нужно привести в порядок, но решение ниже. Я собираюсь быстро прочитать о jQuery .live, потому что он, кажется, содержит ответ, почему ничего не работает.

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

Answer 3

Вы запускаете анимацию на элементе, но пытаетесь остановить анимацию на элементе.Вместо этого попробуйте вызвать стоп напрямую:

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