jQuery .animation延迟问题
jQuery .animation延迟问题
提问于 2011-11-19 22:17:09
在使用jQuery的.animation函数时，我遇到了问题，当快速移动框时，动画不会被触发，但是当同样的事情缓慢发生时，它会正常工作。任何帮助添加一个500毫秒的延迟，而不打破原脚本的机智将是令人敬畏的，谢谢。
原始脚本：
$(document).on('mouseenter', '.learnmore', function(e){
e.preventDefault();
$(".top", this).css({top:0}).animate({top:-205},{duration:500});
$(".bottom", this).css({top:0}).animate({top:-210},{duration:500});
});
$(document).on('mouseleave', '.learnmore', function(e){
e.preventDefault();
$(".top", this).css({top:-205}).animate({top:0},{duration:500});
$(".bottom", this).css({top:-210}).animate({top:0},{duration:500});
});带有延迟的示例： http://jsfiddle.net/nblackburn/jSPMs/
致以亲切的问候，
Nathaniel Blackburn
回答 2
Stack Overflow用户
回答已采纳
发布于 2011-11-19 22:25:53
试试这个：
http://jsfiddle.net/jSPMs/8/
$(document).on('mouseenter', '.learnmore', function(e){
e.preventDefault();
var _this = $(this);
$(this).data("timer", setTimeout(function(){
_this.data("timer", null);
_this.find(".top").animate({top:-205},500);
_this.find(".bottom").animate({top:-210},500)
}, 500));
});
$(document).on('mouseleave', '.learnmore', function(e){
e.preventDefault();
clearTimeout($(this).data("timer"));
if(!$(this).data("timer"))
{
$(".top", this).animate({top:0},500);
$(".bottom", this).animate({top:0},500);
}
});Stack Overflow用户
发布于 2011-11-19 22:24:38
在调用特定回调时，不要使用.css()设置CSS，而是依赖于.animate()。
此外，您还可以使用.animate()的未排队版本(只需传递选项queue=false)。
因此，您的代码可能如下所示(请参阅这弹琴)：
$(document).on('mouseenter', '.learnmore', function(e){
e.preventDefault();
$(".top", this).delay(500).animate({top:-205},{duration:500,queue:false});
$(".bottom", this).delay(500).animate({top:-210},{duration:500,queue:false});
});
$(document).on('mouseleave', '.learnmore', function(e){
e.preventDefault();
$(".top", this).animate({top:0},{duration:500,queue:false});
$(".bottom", this).animate({top:0},{duration:500,queue:false});
});看起来挺顺利的。不是吗？
有用吗？
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/8197795
复制相关文章
相似问题
腾讯云开发者
