jQuery - fadeIn(),fadeOut(),animate(),stop()和闪烁

时间:2011-07-09 02:01:39

标签: jquery jquery-animate fadein fadeout

当“悬停”触发此代码时:

jQuery('#test').animate({opacity: 1},300);

并且用户徘徊并且非常快速地停止“#test”项目长时间闪烁(当然,在悬停时不透明度被设置为1并且在悬停时被设置为0)。

添加stop()一直对我有用:

jQuery('#test').stop().animate({opacity: 1},300);

关键是我必须使用fadeIn()和fadeOut(),我不知道在这种情况下如何避免闪烁?

实例:http://jsfiddle.net/caHq5/(将指针从黑暗方块快速移动到背景,然后移动到正方形,然后移动到背景等等)。 stops()什么都不做。

3 个答案:

答案 0 :(得分:5)

这是你追求的效果吗?

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()});
            });
});

答案 1 :(得分:0)

我相信这可行。

jQuery(document).ready(function() {    
    jQuery('#container').hover(function(){
        jQuery('#wrong').clearQueue().fadeTo(400, 1);
            },function() {
        jQuery('#wrong').clearQueue().fadeTo(400, 0);
            });   
});

答案 2 :(得分:0)

添加到“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);
    });
});