jQuery - fadeIn()、fadeOut()、animate()、stop() 和闪烁
Posted
技术标签:
【中文标题】jQuery - fadeIn()、fadeOut()、animate()、stop() 和闪烁【英文标题】:jQuery - fadeIn(), fadeOut(), animate(), stop() and blinking 【发布时间】:2011-10-01 17:06:26 【问题描述】:当“悬停”触发此代码时:
jQuery('#test').animate(opacity: 1,300);
并且用户悬停和取消悬停非常快,“#test”项目会闪烁很长时间(当然不透明度在悬停时动画为 1,在悬停时动画为 0)。
添加 stop() 总是对我有用:
jQuery('#test').stop().animate(opacity: 1,300);
关键是我必须使用fadeIn() 和fadeOut(),我不知道在这种情况下如何避免闪烁?
实时示例:http://jsfiddle.net/caHq5/(将您的指针非常快速地从黑色方块移动到背景,然后移动到方块,然后移动到背景等等)。 stop() 什么都不做。
【问题讨论】:
【参考方案1】:这是你想要的效果吗?
jQuery(document).ready(function()
jQuery('#container').hover(function()
jQuery('#wrong').stop().fadeTo(200,1);
,function()
jQuery('#wrong').stop().fadeTo(200,0);
);
);
如果您真的希望元素在褪色后隐藏,而不是仅仅隐藏:
jQuery(document).ready(function()
jQuery('#container').hover(function()
jQuery('#wrong').stop().show().fadeTo(200,1);
,function()
jQuery('#wrong').stop().fadeTo(200,0, function() $(this).hide());
);
);
【讨论】:
【参考方案2】:我相信这可能会奏效。
jQuery(document).ready(function()
jQuery('#container').hover(function()
jQuery('#wrong').clearQueue().fadeTo(400, 1);
,function()
jQuery('#wrong').clearQueue().fadeTo(400, 0);
);
);
【讨论】:
【参考方案3】:添加到“Wordpressor”的解决方案,我想出了这个:
http://jsfiddle.net/VTG3r/25/
jQuery(document).ready(function()
// Perform events when mouse enters the container.
jQuery( "#container" ).bind( "mouseenter", function()
// Stop any previous animations and fade in.
jQuery( "#test" ).stop().animate( "opacity": 1 , 300);
jQuery( "#wrong" ).stop().fadeTo( 300, 1 );
jQuery( "#OK" ).stop().animate( "opacity": 1 , 300);
);
// Perform events when mouse leaves the container.
jQuery( "#container" ).bind( "mouseleave", , function()
// Stop any previous animations and fade out.
jQuery( "#test" ).stop().animate( "opacity": 0 , 300);
jQuery( "#wrong" ).stop().fadeTo( 300, 0 );
jQuery( "#OK" ).stop().animate( "opacity": 0 ,300);
);
);
【讨论】:
以上是关于jQuery - fadeIn()、fadeOut()、animate()、stop() 和闪烁的主要内容,如果未能解决你的问题,请参考以下文章
jQuery - fadeIn()、fadeOut()、animate()、stop() 和闪烁
replaceWith() while 元素 fadeOut() 和 fadeIn() 在 JQuery
jquery IE Fadein 和 Fadeout Opacity