jQuery懸停的情況

Question

所以我有了這樣的代碼，它創建了一個div來阻止複選標記的圖像，然後向右滑動，使其看起來像複選標記正在繪製。一切工作正常，除非我希望代碼執行，就好像用戶呆了一段時間，即使用戶只徘徊在一秒鐘。目前，當用戶停止懸停時，動畫停止。謝謝你們！

$('li.activated').hover(function() { 
    $('ul.actilist').prepend($('<div>&nbsp;</div>').addClass('slidebox')); 
}, function() { 
    $('ul.actilist').find('div.slidebox').remove(); 
}); 

$('li.activated').hover(function() { 
    $('div.slidebox').animate({width: '-=17px', marginLeft: '+=14px'}, {duration: '800',easing: 'swing',queue: true}); 
}, function() { 
    if($('div.slidebox').width() < 17){ 
     $('div.slidebox').animate({width: '+=17px', marginLeft: '-=14px'}, {duration: '2000',easing: 'swing',queue: true}); 
    } 
}); 

Answer 1

我不是太熟悉的hover()功能，但代碼應該排隊動畫（未測試）：

$('li.activated').mouseenter(function() { 
    $('div.slidebox').animate({width: '-=17px', marginLeft: '+=14px'}, {duration: '800',easing: 'swing',queue: true}); 
}).mouseleave(function() { 
    if($('div.slidebox').width() < 17){ 
     $('div.slidebox').animate({width: '+=17px', marginLeft: '-=14px'}, {duration: '2000',easing: 'swing',queue: true}); 
    } 
}); 

Answer 2

可以使用setTimeout功能延遲MouseLeave事件：

setTimeout(function() { 
    $('div.slidebox').animate({width: '+=17px', marginLeft: '-=14px'}, {duration: '2000',easing: 'swing',queue: true}); 
}, 800); 

你想要什麼，不過，因爲如果用戶從移動鼠標，匆忙回到這不會做的相當，那麼div會進一步萎縮，然後重新長出其超時到期後的預期大小。 （重複執行此操作可能會導致div簡短地縮小爲無）。爲防止出現此情況，您需要防止在「取消的mouseleave」情況下觸發懸停事件。這需要多一點代碼：

var hovered = false; 

$('li.activated').hover(function() { 
    if(hovered) return; 
    hovered = true; 
    $('div.slidebox').animate({width: '-=17px', marginLeft: '+=14px'}, {duration: '800',easing: 'swing',queue: true}); 
}, function() { 
    var element = this; 
    setTimeout(function() { 
     if($(element).is(':hover') || !hovered) return; 
     hovered = false; 
     $('div.slidebox').animate({width: '+=17px', marginLeft: '-=14px'}, {duration: '2000',easing: 'swing',queue: true}); 
    }, 800); 
});​ 

的jsfiddle：http://jsfiddle.net/uUjhJ/2/

這主要是工作，但也有一些勤奮老鼠揮舞着，有可能使動畫「破解」，並開始抽水，像波紋管（直到它通過動畫隊列）。這是通過在mouseleave動畫播放過程中將鼠標移回來開始的，而且我唯一可以找到解決此問題的方法是將「隊列」選項設置爲false，並將動畫值更改爲固定值（而不是比相對值使用+ =和 - =）：

var hovered = false; 

$('li.activated').hover(function() { 
    if(hovered) return; 
    hovered = true; 
    $('div.slidebox').animate({width: '83px', marginLeft: '14px'}, {duration: '800',easing: 'swing',queue: false}); 
}, function() { 
    var element = this; 
    setTimeout(function() { 
     if($(element).is(':hover') || !hovered) return; 
     hovered = false; 
     $('div.slidebox').animate({width: '100px', marginLeft: '0px'}, {duration: '2000',easing: 'swing',queue: false}); 
    }, 800); 
});​ 

的jsfiddle：http://jsfiddle.net/uUjhJ/3/

理論上應該可以通過保持狀態的仔細跟蹤和使用回調的調用，使原來的方法正常工作到animate，但它非常挑剔，我還沒有能夠使其工作。

編輯：啊，錯過了你還想在懸停事件中添加/刪除div。這樣做的工作：

var hovered = false; 

$('li.activated').hover(function() { 
    if(hovered) return; 
    hovered = true; 
    if(!$('div.slidebox').length) 
     $('ul.actilist').prepend($('<div>&nbsp;</div>').addClass('slidebox')); 
    $('div.slidebox').animate({width: '83px', marginLeft: '14px'}, {duration: '800',easing: 'swing',queue: false}); 
}, function() { 
    var element = this; 
    setTimeout(function() { 
     if($(element).is(':hover') || !hovered) return; 
     hovered = false; 
     $('div.slidebox').animate({width: '100px', marginLeft: '0px'}, {duration: '2000',easing: 'swing',queue: false,complete: function() { 
      if($(element).is(':hover')) return; 
      $('ul.actilist').find('div.slidebox').remove(); 
     }}); 
    }, 800); 
});​ 

注意，該元素在「完整」的回調去除，以確保它的動畫，而不是之前後取出，並同時添加代碼和刪除代碼仔細檢查，他們不會與任何內容衝突（重新顯示時重複添加或刪除）。

的jsfiddle：http://jsfiddle.net/uUjhJ/4/