Переходы связывания JQuery на css

Question

Примечание: примеры протестированы с использованием хрома. Firefox ia не работает.

У меня есть этот код js для добавления css-переходов.

Для одного изображения (рабочий):

var isTransition = false; 
var isRemoveQueue = false; 

$(".text").bind("webkitTransitionEnd mozTransitionEnd transitionEnd", function() { 
    isTransition = false; 
    if (isRemoveQueue) { 
     $(this).removeClass("animated-hover"); 
    } 
}); 

$(".text").on('mouseenter', function() { 
    $(this).addClass("animated-hover"); 
    isTransition = true; 
    isRemoveQueue = false; 
}); 

$(".text").on('mouseleave', function() { 
    if (!isTransition) { 
     $(this).removeClass("animated-hover"); 
    } else { 
     isRemoveQueue = true; 
    } 
}); 

скрипку: https://jsfiddle.net/drecodeam/3pb38v4f/6/

Это было важно для меня, что переход не остановится, если вы просто наведите курсор мыши быстро на изображение. Он работает хорошо с одним изображением.

Вот что: Если я использую больше изображений, чем один, у меня есть странные эффекты, например, переход застрял, например.

Пример с большим количеством изображений:

https://jsfiddle.net/3pb38v4f/9/

Рядом с ним не работает должным образом, он также не работает с светлячок.

Answer 1

Hoverflow именно то, что я искал.

Он может обрабатывать очереди в JS очень хороший и чистый :)

http://www.2meter3.de/code/hoverFlow/

Answer 2

Вы могли бы просто использовать

$(".text").on('mouseleave', function() { 
    $(this).removeClass("animated-hover"); 
    isRemoveQueue = true; 
}); 

Я думаю, что ты над думал, что это немного :)