Javascript 当文本即将移出可视范围时，如何淡出文本？

当文本即将移出可视范围时，如何淡入淡出文本？也许这个问题有点模糊，但我的意思是：

---

我如何做到这一点？也许使用jQuery或其他什么？

有多种方法可以实现这一点。最简单的方法是在文本div的顶部放置一个渐变（从白色到透明）图像，这样它就可以覆盖顶部以外的任何内容

您还可以使用CSS渐变并将其放置在顶部。比如：

background: -moz-linear-gradient(top, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.65)), color-stop(100%,rgba(0,0,0,0))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); /* IE10+ */
background: linear-gradient(top, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00000000',GradientType=0 ); /* IE6-9 */

这是通过以下有用的工具生成的：

---

如果整页滚动，请确保包含渐变的元素固定在页面内；如果只想滚动文本，请确保包含渐变的元素固定在另一个可滚动div的顶部。

这是用于水平滚动，但可能会有帮助：

它使用两个叠加在边缘上的逐渐透明的图像使其后面的文本淡出：

“他们放置了两个PNG图像，从100%不透明渐变为100%透明。”

---

您可以使用纯CSS实现这一点，方法是在文本上创建一个层，并使用渐变：这是CSS3，并非所有浏览器都支持它。但在我看来，网络浏览器必须很快支持CSS3。