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.
答
我认为这个问题是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 });
});
答
.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 });
});
+0
但现在它排队动画,所以如果人们将鼠标悬停和放出几次,动画 – JBoom
答
我Snicksie同意,但是,对于当前的代码的情况下,有一个更好的方法:
$('.carousel-desc').hover(function() {
$(this).delay(1000).animate({
'height': '180px'
}, 600);
}, function() {
$(this).delay(1000).animate({
'height': '40px'
}, 600);
});
好吧,我的代码确实工作,如果我把'队列'出来,但延迟不起作用,如果我添加您的代码与队列:虚假在那里。 – JBoom
对不起,忘了删除队列:false :)将更改 – Snicksie
感谢Snicksie,现在所有的工作都很棒 – JBoom