Question

我使用SVG图标为thumnail制作了一个非常简单的悬停动画，看看 HERE ，现在我使用的JS代码是这样的：

var elemRemoveAnim = null;

$('.vedio-thumb').hover(
    function(){
            $(this).find('.youtube-icon > .youtube-red')[0].classList.add('y-animated' , 'fadeInUp');
            $(this).find('.youtube-icon > .youtube-white')[0].classList.add('y-animated' , 'fadeInUp');
    }, 
    function(){
            removeVedioAnim($(this));
});


function removeVedioAnim(elem) {
    elemRemoveAnim = elem;
    setTimeout(function(){
        elemRemoveAnim.find('.youtube-icon > .youtube-red')[0].classList.remove('y-animated' , 'fadeInUp');
        elemRemoveAnim.find('.youtube-icon > .youtube-white')[0].classList.remove('y-animated' , 'fadeInUp');
    }, 1000);
}

正如你所看到的，我试图在延迟1000ms之后删除动画类，那是因为如果你将鼠标悬停在上面并立即将其悬停（你必须非常快地完成它），你会注意到动画卡住了，IE白色箭头仍然只会处于半转换状态，技术上会发生这种情况，因为很快就会删除动画类。

如果我在悬停功能中添加代码，这会使情况更加恶化，是否有更通用的解决方案来解决这个问题？使用这个解决方案的另一个问题是，一旦你盘旋，然后如果你徘徊，你这样做2-3次非常快，在2-3次你徘徊动画将只播放一次，只需setTimeout函数将等待1秒以删除类。

我希望有一种更优雅的方式来做到这一点。

谢谢。

Answer 1

<强> SEE DEMO

使用“animationend”事件捕获箭头上fadingInUp运动的结束，该运动运行时间更长（白色）。

 $utube_white.one("animationend webkitAnimationEnd oAnimationEnd",function() {                  
  $utube_red.get(0).classList.remove('y-animated' , 'fadeInUp');
  $utube_white.get(0).classList.remove('y-animated' , 'fadeInUp');
  isLocked = false;
});

在你的例子中，HOVER事件中不需要mouseleave函数，因为你没有对它做任何特别的事情 - 只需删除没有任何其他动作的动画类。这可以在第一个“HandlerIn”函数中的“Animationend”事件中完成。而不是mouseleave函数放空$ .noop以防止jQuery认为你的悬停函数只包含一个参数。 .hover（handlerIn，$ .noop）而不是.hover（handlerInOut）。您可以更改它，这取决于您，但在最后一种情况下，该函数将在MouseOn和MouseOut上触发。
使用标志“isLocked”以防止在快速悬停时触发HandlerIn。

当鼠标悬停快速发生时，动画未完成对SVG悬停动画的转换

1 个答案: