Javascript 在HTML中垂直减少一组文本段落不透明度的好方法是什么

我正在用rails编写一个应用程序。我有多个段落的动态文本是垂直列出的

我正在寻找一种通过javascript或CSS垂直增加段落组不透明度的简洁方法，这样当你进入页面时，文本体就会消失

<p>Some text obviously more than i am writing here</p>   ||
<p>Some text obviously more than i am writing here</p>   || increase opacity
<p>Some text obviously more than i am writing here</p>   \/

有些文本显然比我在这里写的要多
||
有些文字明显比我在这里写的要多
| |增加不透明度
有些文字显然比我在这里写的要多
\/

1./垂直和水平分阶段的标准方法是什么

---

2./我该如何划分团队的阶段？

这可能是一个好的开始

var increment = 10;
$("p").each(function(index, value) {
   $(this).fadeTo("slow", (increment*index)/100);
});

玩一玩

---

您可以通过简单地编辑“increment”变量来更改不透明度增量。

这里有一个版本，它可以工作，而不管有多少元素

试试看：

---

要反转淡入淡出效果，请从

return

语句中删除

1-

。不确定你想走哪条路。

不确定你希望淡出的平滑程度，但如果选择带有JS的段落，整个段落的不透明度将不会逐行改变。因此，如果有一个30行的长段落，整个段落将是不透明的：x

---

如果希望平滑淡出，即每一行（或部分行）的不透明程度略低，最好在段落上方创建一个元素，该元素具有从不透明到透明的渐变（png）背景图像。应用位置：fixed将确保文本在用户滚动页面时淡出，而不是仅仅根据段落在标记中的位置静态淡出。

我正在使用一个类似的

元素，对其应用CSS3线性渐变，相对定位，堆叠在内容顶部，变得更加不透明（至全白色）从上到下。内容在下面滑动。这在Webkit和Firefox中正在运行。我将粘贴一些相关的CSS

background: -moz-linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255,1));
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255,255,255,0)), to(rgba(255,255,255,1)));
...
position: relative;
z-index: 2;

---

你有点聪明：p而且因为每个人都更喜欢我的帖子（j/k），我给了你+1:）谢谢@Marko+1巴卡。我确实认为一定有一个更短的方法来做这个等式。如果我聪明的话，我现在就知道了o） 如果用户代理不支持png图像或alpha图像，会发生什么？如果你说的是IE6，我早就不关心它了。此外，还有很多“修复”，比如TwinHelix。

background: -moz-linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255,1));
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255,255,255,0)), to(rgba(255,255,255,1)));
...
position: relative;
z-index: 2;