闪烁CSS和Javascript下拉

这里是我的菜单中的HTML：闪烁CSS和Javascript下拉

<div class="navLink four"> 
    <div> 
     <a href="this.php">this</a> 
     <div class="subMenu"> 
      <a href="link.php">link</a> 
      <a href="link.php">link</a> 
     </div> 
    </div> 
</div>

我有了这个jQuery的显示和隐藏我的菜单：

$('.navLink div').hover(
    function() { 
    $('.navLink div .subMenu').css({'display': 'none'}); 
    $(this).find('.subMenu:first').slideDown(); 
    }, 
    function() { 
    $('.navLink div .subMenu').css({'display': 'block'}); 
    $(this).find('.subMenu:first').slideUp(); 
    } 
);

而这个CSS：

.navLink .subMenu { 
    display: none; 
    position: absolute; 
} 
.navLink > div:hover .subMenu { 
    display: block; 
}

但是下拉flikers了很多，当你将鼠标悬停在了，我想我需要一些preventDefault（）方法或东西在我的JavaScript。

来源

2013-05-26 dezman

不，你只需要据此决定是否或者你不打算使用CSS或JavaScript，而不是同时使用。现在，CSS隐藏和显示，一秒钟后，JavaScript也一样，导致闪烁。 – adeneo

这里有一个的jsfiddle，借以说明问题：http://jsfiddle.net/V5H3A/

这里是解决方案：http://jsfiddle.net/jdfqW/1/

你需要停止动画像这样：

$('.navLink div').hover(
    function() { 
     $('.navLink div .subMenu').css({'display': 'none'}); 
     $(this).find('.subMenu:first').stop().slideDown(); 
    }, 
    function() { 
     $('.navLink div .subMenu').css({'display': 'block'}); 
     $(this).find('.subMenu:first').stop().slideUp(); 
    } 
);

对于代码甚至更少行，你可以做到这一点http://jsfiddle.net/jdfqW/2/：

CSS：

.navLink .subMenu { 
    display: none; 
    position: absolute; 
}

的Javascript：

$('.navLink div').hover(
    function() { 
     $(this).find('.subMenu:first').stop().slideToggle(); 
    } 
);

或者如果你是超级冒险你只能与CSS3做这一切像这样http://jsfiddle.net/jdfqW/3/：

CSS

.navLink .subMenu { 
    height: 0px; 
    overflow: hidden; 
    position: absolute; 
    -webkit-transition:height 0.5s ease; 
    -moz-transition:height 0.5s ease; 
    transition:height 0.5s ease 
} 

.navLink:hover .subMenu { 
    height: 20px; 
}

来源

2013-05-26 06:15:07 chrislondon

Working jsFiddle Demo

使用.stop().slideUp()和.slideDown()之前方法：

$('.navLink div').hover(
    function() { 
     $('.navLink div .subMenu').css({'display': 'none'}); 
     $(this).find('.subMenu:first').stop().slideDown(); 
     // HERE ---------------------^
    }, 
    function() { 
     $('.navLink div .subMenu').css({'display': 'block'}); 
     $(this).find('.subMenu:first').stop().slideUp(); 
     // HERE ---------------------^
    } 
);

参考文献：

.stop() - jQuery API文档

停止正在运行的匹配元素上的动画。

来源

2013-05-26 06:11:42

使用stop() ...这将停止正在运行的动画，我认为是造成闪烁...

$(this).find('.subMenu:first').stop().slideDown(); 
$(this).find('.subMenu:first').stop().slideUp();

来源

2013-05-26 06:12:12 bipen

$('.navLink div a:first').mouseenter(function() { 
    $(this).next('.subMenu').slideDown(200); 
}).mouseleave(function() { 
    $(this).next('.subMenu').slideUp(200); 
});

没有任何闪烁--->http://jsfiddle.net/WK7We/

来源

2013-05-26 06:17:04

闪烁CSS和Javascript下拉

回答

相关问题