CODEWITHSUNDEEP
javascriptjquery
Liam
Liam

Reputation: 9855

Fade in and out bug with jQuery

On my page, when the user gets to say 1000 pixels scrolled down the page, my navigation fades out, when i scroll back up the navigation fades in. Im using the following which works perfectly...

// Fade Navigation

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

My only problem is that if you scroll really quickly, the animation doesnt know if its visible or not, is there a way to stop this?

Upvotes: 0

Views: 156

Answers (2)

Mark Graham
Mark Graham

Reputation: 171

I've been playing around with this. See comments in code.

<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>

Upvotes: 0

Richard Neil Ilagan
Richard Neil Ilagan

Reputation: 14747

If you pass in true as a second parameter to .stop(), it'll stop the animation and jump the element to the state it should be in if the animation actually finished.

i.e. if you call $('nav ul').stop(true, true).fadeIn(500) while an element is fading out, it will stop the fade out, and make it jump to it's logical end (which is completely faded out) before starting the .fadeIn() animation.

Using that, you should be able to get away with the following instead of your code block above:

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

It'll look a little jerky though, but you can work around it with a bit more complicated logic.

Upvotes: 1

Related Questions