Question

我是动画的jomys mouseover / mouseout事件的dom-object。这工作正常，除非在上一个动画运行时输入/退出鼠标。然后它会跳到下一个看起来很丑的动画的开头。

如何避免这种情况？

$("#leftlogo").on("mouseover", function(t) {
    $(t.target).css("animation-name", "left-over");
}).on("mouseout", function(t) {
    $(t.target).css("animation-name", "left-out");
});

Answer 1

CSS3动画事件： http://www.sitepoint.com/css3-animation-javascript-event-handlers/

您可以使用1 .on（）处理程序处理多个事件，包括CSS3 animationend事件，而不是链式jQuery调用。

  //set boolean when animating 
  var isAnimating = false;

  $("#leftlogo").on({ 
    //handle mouseover
    "mouseover": function(t) {
     $(t.target).css("animation-name", "left-over");
     isAnimating = true;
    }, 
    //handle animationend event
    "animationend": function(e) {
        if (e.animationName == "animation-name")      
         {  isAnimating = false; }
    },
    //handle mouseout
   "mouseout": function(t) {
    while (isAnimating != false) 
      { 
        //hang on a sec
      };

      $(t.target).css("animation-name", "left-out");
    });

请注意，这尚未经过测试 - 您可能需要使用条件播放。

这里没有反映出更好的做法是使用.addClass（）和.removeClass（）而不是.css（）。这样可以将您的风格定义保留在CSS＆amp;只有JS中的逻辑。

Answer 2

我的建议是避免使用毛茸茸的 CSS3动画事件 来平滑关键帧动画，而是使用transition。我知道你在问什么，但是我给这个替代方案可能会为你节省一杯代码，而你可能只需要一茶匙。在几年内，它可能会更清洁。

http://jsbin.com/kabep/2/edit?html,css,output

#leftlogo {
  transition: all 1s;
  background: pink;
}

#leftlogo:hover{
  background: yellow;  
}

在当前动画运行时阻止跳转到下一个动画的开始

2 个答案: