Question

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

我想做的是：

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

我想在不透明度0-1-0

的窗口滚动中对这三种状态进行动画处理

有可能吗？

Answer 1

你的意思是：

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

Answer 2

我已更改this问题的jsFiddle以获得结果，请参阅此jsFiddle。

根据滚动位置设置opacity。我在CSS中将之前的<{1>} 任意滚动设置为0。你当然可以改变它。

jQuery动画不透明0-1-0

2 个答案: