CODEWITHSUNDEEP
jqueryjquery-animatefadeinslidefadeout
Kevin Haag
Kevin Haag

Reputation: 145

Fade and slide effect on navigation (jQuery)

I'm trying to create a "back to top" link that fades in and slides in from left when the user scrolls past a certain point and fades and slides out again after scrolling back up past the same point.

HTML:

<section id="banner"></section>
<nav id="fixed">
    <ul>
        <li id="top-link"><a href="#">Top</a></li>
        <li><a href="#">Nav 1</a></li>
        <li><a href="#">Nav 2</a></li>
        <li><a href="#">Nav 3</a></li>
        <li><a href="#">Nav 4</a></li>
    </ul>
</nav>
<section id="content"></section>

Javascript:

$(document).ready(function(){
    $("#top-link").hide();
});

$(function() {
    $(window).scroll(function() {
        if($(this).scrollTop() >= 300) {
            $('#top-link').fadeIn();
        } else {
            $('#top-link').fadeOut();
        }
    });
});

I'm able to get it to fade in and fade out when you scroll past 300px, but as you can see from this example http://jsfiddle.net/AFMxe/10/ when it fades in and out, the subsequent li items "pop" over to the right. Is there a way to smoothly animate it to slide over at the same time as the fade?

Upvotes: 1

Views: 1316

Answers (2)

Stefan Surkamp
Stefan Surkamp

Reputation: 992

How about http://jsfiddle.net/AFMxe/11/ ? Everything I did was adding a few lines of CSS:

#top-link {
position: absolute;
margin-left: 50px;
}

EDIT:

New version here: http://jsfiddle.net/AFMxe/13/

I added the class 'no-top-link' for each of the other list items (could be done better of course) and changed the jQuery fading function to:

$(function() {
    $(window).scroll(function() {
        if($(this).scrollTop() >= 300) {
            $('#top-link').fadeIn();
            $('.no-top-link').animate({ marginRight: "12px" }, 1000 )
            // 1000 describes the time (in ms) the animation takes, change it as desired
        } else {
            $('#top-link').fadeOut();
        }
    });
});

EDIT 2: That following function should be appropriate

$(function() {
    $(window).scroll(function() {
        if($(this).scrollTop() >= 300) {
            $('#top-link').fadeIn();
            $('.no-top-link').animate({'marginRight': '12px'},{duration: 1000, queue: false});
        } else {
            $('#top-link').fadeOut();
            $('.no-top-link').animate({'marginRight': '20px'},{duration: 1000, queue: false});
        }


    });

Problem solution: I forgot to add 'queue'.

Explanation:

queue (default: true) Type: Boolean or String A Boolean indicating whether to place the animation in the effects queue. If false, the animation will begin immediately. As of jQuery 1.7, the queue option can also accept a string, in which case the animation is added to the queue represented by that string. When a custom queue name is used the animation does not automatically start; you must call .dequeue("queuename") to start it. (Source: http://api.jquery.com/animate/)

Finished jsFiddle

Upvotes: 2

Sushanth --
Sushanth --

Reputation: 55750

Try using animate method instead..

//FADE IN BACK TO TOP LINK

$(document).ready(function(){
    $("#top-link").css('opacity', '0');
});

$(function() {
    $(window).scroll(function() {
        if($(this).scrollTop() >= 300) {
            $('#top-link').animate({
                opacity : 1  
            },400);
        } else {
            $('#top-link').animate({
                opacity : 0  
            },400);
        }
    });
});

Check Fiddle

Otherwise you can always use the visibility property instead of the display property

Upvotes: 0

Related Questions