jQuery动画不透明0-1-0

已经找到很多方法来在滚动时为元素设置动画，但它们似乎都从一个状态变为另一个状态，而不是跨越三个状态。jQuery动画不透明0-1-0

我想要做的是：

顶件正在进入视口的底部：不透明度0
元素是视口的中间：不透明度元素的1
底部留下视口的顶部：不透明度0

我想跨越这三种状态的窗口滚动的不透明度动画0-1-0

可以吗？

来源

2013-07-22 Scott L

看看这个：http://stackoverflow.com/questions/10203777/div-opacity-based-on-scrollbar-position。你应该转换一下代码，让不透明度为1。 – Pieter

谢谢，但那是我提到的那种帖子我已经看到它从1-0（或0-1）的动画，但我想动画不透明然后退出（0-1-0） –

你只需要有两个每div的动作。像从顶部到中部的0-1以及从中间到底部的1-0的动画一样（全部基于偏移大概） –

我已经改变了的this问题的jsfiddle得到结果，看到这个jsFiddle。

opacity根据滚动位置设置。在之前，我已经将div 的opacity设置为任何在CSS中滚动为0的值。你当然可以改变它。

来源

2013-07-22 13:24:24 Pieter

感谢@Pieter这似乎工作。任何想法如何重复下一页？如果我的div（全部都是同一个班级）堆叠在一起，我希望每个人都淡入淡出，然后淡出来并留在屏幕上？ $（document）.scrollTop将不再有效，因为它是窗口和单个div权限之间的计算？ –

我想你应该看一下''（选择器）.scrollTop（）'的div的'scrollTop（）'。我不知道它是否有效，你应该试验一下;-) – Pieter

但请注意，如果你想让它像jsFiddle一样工作，你的'div'的位置并不重要。您可以将更改的div放在您想要的位置。 – Pieter

您的意思是这样的：

<html> 
    <div style="width:100px;height:100px;background-color:#666;"></div> 
</html> 
<script src="../framework/jquery.js"></script> 
<script> 
$(document).ready(function(){ 
    $("div").animate({"opacity":0}); 
    $("div").animate({"opacity":1}); 
    $("div").animate({"opacity":0}); 
}) 
</script>

来源

2013-07-22 13:20:34

OP希望它在滚动到不透明时滚动到屏幕上，而不是页面加载 –

对不起我; m不擅长英语 –

jQuery动画不透明0-1-0

回答

相关问题