javascript - 向溢出容器的内容添加渐变淡入淡出

Question

1. 我正在尝试在溢出 a 的内容上添加渐变淡入淡出，如下所示:http://jsfiddle.net/6k3vV/
2. 在 div 上我设置了 200 像素的高度
3. 我想根据内容是否实际溢出 200 像素有选择地显示淡入淡出

如果我已经加载了所有内容/资源，一切正常:

类似于 <h1>Hello World</h1>会很好用，我可以计算出它的高度 如果我将它插入到文档中

但是，如果我有类似 <h1>Hello World</h1><img src=".." /> 的东西它不会工作，因为我不能可靠地 确定在加载图像本身之前内容将占据的高度。

我正在尝试在评论页面上添加此功能，我将每条评论注入(inject)包装 div 并可选择显示渐变淡入淡出。我正在考虑的当前解决方案是检查和标记并附加一个 onload将在图像加载后计算高度的事件处理程序。

有更好的方法吗？

Answer 1

既然你有一个设定的高度，那就很容易了。在文档加载(或事件)时，只需检查每个“部分”的高度，如果该高度大于 200，则附加一个带有类淡出的 div。

Fiddle for you

我建议为您的 <section> 添加一个类元素而不是将该元素用作整个选择器。

您可能想尝试使用 height的 .fadeout作为%而不是 em