导航上的淡入淡出和滑动效果(jQuery)

Question

我正在尝试创建一个"返回顶部"链接，当用户滚动经过某个点时，该链接会淡入并从左侧滑入，而在向上滚动经过同一点后，该链接又会淡入和滑出。

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();
        }
    });
});

当你滚动超过300px时，我可以让它淡入淡出，但正如你从这个例子中看到的那样http://jsfiddle.net/AFMxe/10/当它淡入淡出时，随后的li项目会"弹出"到右侧。有没有一种方法可以平滑地设置动画，使其在渐变的同时滑过？

Answer 1

怎么样http://jsfiddle.net/AFMxe/11/？我所做的一切都是添加几行CSS：

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

编辑：

此处为新版本：http://jsfiddle.net/AFMxe/13/

我为每个其他列表项添加了类"无顶部链接"（当然可以做得更好），并将jQuery衰落函数更改为：

$(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();
        }
    });
});

第2版：以下功能应该是适当的

$(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});
        }

    });

问题解决方案：我忘记添加"队列"。

说明：

队列（默认值：true）Type：Boolean或String表示是否将动画放置在效果队列中。如果为false，则动画将立即开始。从jQuery 1.7开始，队列选项也可以接受字符串，在这种情况下，动画将添加到由该字符串表示的队列。当使用自定义队列名称时动画不会自动启动；你必须打电话.dequeue（"queuename"）来启动它。（来源：http://api.jquery.com/animate/)

已完成jsFiddle

Answer 2

请尝试使用animate方法。。

//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);
        }
    });
});

检查Fiddle

否则，您可以始终使用visibility属性而不是display属性