jQuery在导航中淡入淡出反复淡入淡出

jquery fade in navigation fading in and out repeatedly?

本文关键字：淡入 淡出 导航 jQuery      更新时间：2023-09-26

我有一个基于scrollTop的淡入淡出的导航设置。问题是，它正在快速闪烁，永远不会完全淡入或淡出。

.HTML： 

<div class="drop-nav">
    <ul>
        <li class="drop-nav-logo"><img style="width: 97px;" src=""></li>
        <li>About</li>
        <li>Solutions</li>
        <li>Products</li>
        <li>Support</li>
        <li>Blog</li>
        <li>Contact</li>
    </ul>
    <div class="demo-us">Request Free Demo</div>
</div>

.JS：

//Drop nav
$(window).scroll(function() {
    if($(window).width() > 667) {
        if($(this).scrollTop() < 400) {
            $('.drop-nav').fadeOut();
        }
        else {
            $('.drop-nav').fadeIn();
        }
    }
});

如何让它适当地淡入淡出？

您可以在淡入/淡出之前调用.stop()：

if($(this).scrollTop()<400){
   $('.drop-nav').stop().fadeOut();
}else{
   $('.drop-nav').stop().fadeIn();
}

小提琴

从文档中：

When .stop() is called on an element, the currently-running animation (if any) is immediately stopped.

相关文章：