jQuery動畫延遲不起作用

當用戶懸停時，我正在爲一個div製作動畫，只是想要一點延遲，但它似乎沒有增加延遲，是否有什麼我做錯了？jQuery動畫延遲不起作用

$(".carousel-desc").mouseenter(function() { 
    $(this).delay(1000).animate({ 'height': '180px' }, { queue: false, duration: 600 }); 
}); 

$(".carousel-desc").mouseleave(function() { 
    $(this).delay(1000).animate({ 'height': '40px' }, { queue: false, duration: 600 }); 
});

感謝，J.

來源

2011-09-23 JBoom

我認爲這個問題是queue: false; Usally動畫得到排隊，但你馬上讓動畫功能動畫。爲你的東西

$("#element").mouseEnter(function(){ 
    $("#element").clearQueue(); 
    //other stuff 
}

：

這也許會做什麼，你propably需要

$(".carousel-desc").mouseenter(function() { 
    $(this).clearQueue(); 
    $(this).delay(1000).animate({ 'height': '180px' }, { duration: 600 }); 
}); 

$(".carousel-desc").mouseleave(function() { 
    $(this).clearQueue(); 
    $(this).delay(1000).animate({ 'height': '40px' }, { duration: 600 }); 
});

來源

2011-09-23 10:31:11 Snicksie

好吧，我的代碼確實工作，如果我把'隊列'出來，但延遲不起作用，如果我添加您的代碼與隊列：虛假在那裏。 – JBoom

對不起，忘了刪除隊列：false :)將更改 – Snicksie

感謝Snicksie，現在所有的工作都很棒 – JBoom

.delay()，因爲你把queue: false在動畫選項延遲動畫隊列

，它立即執行。

這樣使用它，它會被固定

$(".carousel-desc").mouseenter(function() { 
    $(this).delay(1000).animate({ 'height': '180px' }, { duration: 600 }); 
}); 

$(".carousel-desc").mouseleave(function() { 
    $(this).delay(1000).animate({ 'height': '40px' }, { duration: 600 }); 
});

工作示例： http://jsfiddle.net/hxfGg/

來源

2011-09-23 10:38:12 Sander

但現在它排隊動畫，所以如果人們將鼠標懸停和放出幾次，動畫 – JBoom

我Snicksie同意，但是，對於當前的代碼的情況下，有一個更好的方法：

$('.carousel-desc').hover(function() { 
    $(this).delay(1000).animate({ 
     'height': '180px' 
    }, 600); 
}, function() { 
    $(this).delay(1000).animate({ 
     'height': '40px' 
    }, 600); 
});

^{[View output]}

來源

2011-09-23 10:43:03

jQuery動畫延遲不起作用

回答

相關問題