禁用.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); });