淡入淡出jQuery的問題

Question

在我的頁面上，當用戶說1000個像素向下滾動頁面時，我的導航淡出，當我向後滾動導航淡入時，我使用以下完美的作品。 ..

// Fade Navigation 

if(!$('nav ul').is(':visible')) { 
    $('nav ul').stop().fadeIn(500); 
} else { 
    $('nav ul').stop().fadeOut(500); 
} 

我唯一的問題是，如果你真的快速滾動，動畫完全不認識如果它的可見或不可見，有沒有辦法阻止呢？

Answer 1

如果您在true傳遞的第二個參數.stop()，它會停止動畫和元素跳轉至狀態時，它應該是如果動畫實際完成。

即如果調用$('nav ul').stop(true, true).fadeIn(500)而一個元素淡出，將停止淡出，和使其之前跳轉到它的邏輯結束（這是完全淡出）開始.fadeIn()動畫。

利用這一點，你應該能夠代替按照您的代碼塊的上方脫身：

$('nav ul').stop(true, true).fadeToggle(500); 

它會看起來有點生澀，雖然，但你可以解決它多一點複雜的邏輯。

Answer 2

我一直在玩這個。請參閱代碼中的評論。

<nav class="main"> 
    <ul> 
     <li>One</li> 
     <li>Two</li> 
    </ul> 
</nav> 

<script type="text/javascript"> 

    // Do this outside of the onscroll handler. onscroll is fired a lot, 
    // so performance will slow if you're having to create jq instances 
    // or navigate the dom several times 
    var $wnd = $(window); 
    var $nav = $('nav.main'); 

    // Added this to block the main handler from executing 
    // while we are fading in or out...in attempt 
    // to smooth the animation 
    var blockHandler = false; 

    window.onscroll = function() { 
     if (!blockHandler) { 
      blockHandler = true; 

      // I've used 50 here, but calc the offset of your nav 
      // and add the height to it. Or, maybe just half the 
      // height to it so you can see the animation. 
      if ($wnd.scrollTop() < 50) { 
       $nav.fadeIn(500, function() { 
        blockHandler = false; 
       }); 
      } else { 
       $nav.fadeOut(500, function() { 
        blockHandler = false; 
       }); 
      } 
     } 
    }; 

</script>