禁用.hover的时间

Question

TL一组量;博士 - >鼠标悬停（完成），快退鼠标离开（完成）的动画，禁用盘旋而动画播放（需要解决）精灵动画 - 。 FIDDLE with me

我有一个相当具体的问题，我的菜单，因为我的JavaScript知识是有限的，我以为你可以帮我。我想在用户将鼠标悬停在它上面时播放动画，并在鼠标离开按钮时使其恢复到原始状态。当我在一个叫做spritely的脚本的帮助下工作时，我遇到了一个可用性问题。

该代码即使在播放动画时也会注册多个鼠标悬停。这会导致动画在特定帧处冻结的奇怪行为。

我试图用hoverIntent这个脚本来试图猜测用户的意图，如果他在一个区间内移动鼠标一定数量的像素，只调用.hover。这对于某些错误很有效，但是会破坏交互性，并且会影响动画的目的。

我想过一个变量从1000ms减少到1ms，并将函数绑定到这个变量，但失败了。

因为我真的想要这个工作，我转向你，hivemind。简而言之，我想让该按钮在动画完成之前不会注册任何.hover约一秒钟（endAnimationDelay）。任何帮助或建议哪条路要走，我会感激。

jQuery(document).ready(function ($) { 
var fps = 25; 
var playFrames = 25; 
var frames = 25; 
var endAnimationDelay = ((fps/playFrames) * 1000); 

    function playAnimationAbout() { 
     $('#about').sprite({ 
      fps: fps, 
      no_of_frames: frames, 
      play_frames: playFrames 
     }); 
    } 

    function playAnimationAboutBack() { 
     $('#about').sprite({ 
      fps: fps, 
      no_of_frames: frames, 
      play_frames: playFrames, 
      rewind: true 
     }); 
     setTimeout(function() { 
      $('#about').destroy(); 
     }, endAnimationDelay); 
    } 

$('#about').hoverIntent(playAnimationAbout, playAnimationAboutBack); 

}); 

Answer 1

我修正了它，通过添加和删除一组类来指示动画是在播放还是在最后一帧。 fixed FIDDLE

jQuery(document).ready(function ($) { 
var fps = 25; 
var playFrames = 25; 
var frames = 25; 
var endAnimationDelay = ((fps/playFrames) * 1000); 


function playAnimationAbout() { 
    if ($('#about').hasClass('playing')) {} else if ($('#about').hasClass('end')) { 
     $('#about').sprite({ 
      fps: fps, 
      no_of_frames: frames, 
      play_frames: playFrames, 
      rewind: true 
     }); 
     $('#about').addClass('playing'); 
     setTimeout(function() { 
      $('#about').destroy(); 
      $('#about').removeClass('end'); 
      $('#about').removeClass('playing'); 
      $('#about').addClass('start'); 
     }, endAnimationDelay); 
    } else { 
     if ($('#about').hasClass('start')) { 
      $('#about').removeClass('start'); 
     } 
     $('#about').sprite({ 
      fps: fps, 
      no_of_frames: frames, 
      play_frames: playFrames 
     }); 

     $('#about').addClass('playing'); 
     setTimeout(function() { 
      $('#about').addClass('end'); 
      $('#about').removeClass('playing'); 
     }, endAnimationDelay); 
    } 
} 

function playAnimationAboutBack() { 
    if ($('#about').hasClass('playing')) {} else if ($('#about').hasClass('start')) {} else { 
     if ($('#about').hasClass('end')) { 
      $('#about').removeClass('end'); 
     } 
     $('#about').sprite({ 
      fps: fps, 
      no_of_frames: frames, 
      play_frames: playFrames, 
      rewind: true 
     }); 
     $('#about').addClass('playing'); 
     setTimeout(function() { 
      $('#about').destroy(); 
     }, endAnimationDelay); 
     setTimeout(function() { 
      $('#about').addClass('start'); 
      $('#about').removeClass('playing'); 
     }, endAnimationDelay); 
    } 

} 

$('#about').hoverIntent(playAnimationAbout, playAnimationAboutBack); });