导航上的淡入淡出和滑动效果（jQuery）

Posted 2023-05-08

【中文标题】导航上的淡入淡出和滑动效果（jQuery）

【英文标题】：Fade and slide effect on navigation (jQuery)

【发布时间】：2013-07-07 17:35:21

【问题描述】：

我正在尝试创建一个“返回顶部”链接，当用户滚动过去某个点时淡入并从左侧滑入，并在向上滚动回同一点后再次淡入和滑出。

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项目“弹出”到右侧。有没有办法让它在淡入淡出的同时平滑地滑过？

【参考方案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

【讨论】：

这解决了它跳过的问题，但是导航不是这样在它的容器中居中的。我试图让顶部链接之后的 li 项目在淡入时视觉上向右滑动。

@KevinHaag：查看我的编辑。我玩弄了像素值。您必须将它们调整为您的具体页面设计。这是你需要的吗？

真的很近，但是当你向上滚动超过导航时它需要向后滑动。

哦，忘了！根据淡入和改变边距，函数应该是 $(function() $(window).scroll(function() if($(this).scrollTop() >= 300) $('#top -link').fadeIn(); $('.no-top-link').animate( 'marginRight': '12px' , 250 ); else $('#top-link').fadeOut (); if($(this).scrollTop()

@KevinHaag：你看到第二个编辑了吗？这应该是解决方案。

【参考方案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 属性

【讨论】：

这个小提琴有点小问题——列表项不在其容器中居中，顶部链接也不总是显示。我认为这是因为当不透明度设置为 0 时，该元素实际上仍在 DOM 中，因此它会将后续列表项推过来。 （如果我错了，请纠正我）