1

已经找到了很多在滚动时为元素设置动画的方法，但它们似乎都是从一种状态到另一种状态的动画，而不是跨越三种状态。

我想做的是：

  • 元素顶部进入视口底部：不透明度 0
  • 元素在视口中间：不透明度 1
  • 离开视口顶部的元素底部：不透明度 0

我想在不透明度 0-1-0 的窗口滚动上对这三个状态进行动画处理

有可能吗？

4

2 回答 2

2

你是这个意思吗：

<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-22T13:20:34.407 回答
0

我已经更改了这个问题的 jsFiddle 以获得结果，请参阅这个jsFiddle。

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

于 2013-07-22T13:24:24.207 回答