导航上的淡入淡出和滑动效果（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/

我为每个其他列表项添加了“no-top-link”类（当然可以做得更好），并将 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） 类型：Boolean 或 String 一个布尔值，表示 是否将动画放入效果队列。如果为假，则 动画将立即开始。从 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);
        }
    });
});

Check Fiddle

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