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

导航淡化和滑动效果（jQuery）

2 个答案: