Fade in and out bug with 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>