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

我试图创建一个“回到顶部”链接，该链接淡入并从左侧滑入，当用户滚动经过某个点并淡入淡出并在滚动后滑出超过同一点。导航（jQuery）上的淡入淡出和滑动效果

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

我能够得到它的淡入和淡出的时候你滚过300像素，但是你可以看到从这个例子http://jsfiddle.net/AFMxe/10/当它淡入淡出时，随后的li项目“弹出”到右侧。有没有一种方法可以在淡入淡出的同时平滑地进行动画播放？

来源

2013-07-09 Kevin Haag

如何http://jsfiddle.net/AFMxe/11/的visibility财产？一切我所做的就是将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}); 
     } 


    });

问题的解决方案：我忘了添加 '排队'。

说明：

队列（默认值：真）类型：Boolean或String一个布尔值指示是否放置动画效果队列。如果为false，则动画将立即开始。从jQuery 1.7开始，队列选项也可以接受一个字符串，在这种情况下，将动画添加到由该字符串表示的队列中。当使用自定义队列名称时，动画不会自动启动;您必须致电 .dequeue（“queuename”）启动它。（来源：）

成品jsFiddle

来源

2013-07-09 23:03:45

这解决了跳过的问题，但导航没有居中在它的容器这种方式。我试图让顶部链接后的li项目在视觉上向右滑动，因为它会淡入。 –

@KevinHaag：请参阅我的编辑。我玩弄了像素值。你必须调整他们到你的具体页面设计。那是你需要的吗？ –

真的很接近，但是当你滑过备份导航时，它需要向后滑动。 –

使用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

否则，你可以随时使用，而不是display财产

来源

2013-07-09 23:02:50

这一项的小提琴有点出问题 - 列表项不会在其容器中心和顶部链接并不总是显示。我认为这是因为当不透明度设置为0时，元素实际上仍然在DOM中，所以它会将后续列表项目推过来。（纠正我，如果我错了） –

正确..元素不居中，因为元素总是存在.. –

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

回答

相关问题