Question

我有一个基于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();
        }
    }
});

如何让它适当淡入淡出？

Answer 1

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

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

FIDDLE

来自documentation：

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

jquery在导航中淡入淡出和淡出？

1 个答案: