Jquery 将转换绑定到 css

Question

注意：这些例子是用chrome测试的。 Firefox 无法正常工作。

我有这个 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;
    }
});

fiddle: https://jsfiddle.net/drecodeam/3pb38v4f/6/

对我来说很重要，如果您只是快速将鼠标悬停在图像上，过渡不会停止。它适用于一张图片。

事情是这样的：如果我使用的图像多于一个，我会产生奇怪的效果，比如过渡卡住，例如

包含更多图片的示例：

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

除了不能正常工作之外，它也不能与 firefox 一起工作。

Answer 1

你可以直接使用

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

我觉得你想多了:)

Answer 2

Hoverflow 正是我想要的。

它可以很好地处理js中的排队:)

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

Jquery 将转换绑定到 css

Jquery bind transitions to css

javascript

css

append

transition