使用jQuery淡入div的边

如何使用jQuery淡化

div

的边缘？想象一个旋转木马，里面有水平滑动的图像。如何淡出左右两侧，使边缘附近的图像逐渐消失

---

希望一切都清楚

一种简单的方法可能是在边缘上显示一组div，如具有不同不透明度级别的垂直条带，给人以图像淡出的印象

正如Alex所说，最简单的方法可能是覆盖一些东西，以淡出潜在的div。不过，我会简单地使用png透明渐变

虽然这在IE6中不容易实现，但总有一种方法（我个人不再支持IE6）：

---

您可以使用它设置几个透明度降低的div，并将其放入要淡出的项目上方的遮罩中，如下所述：

我认为这可能是您正在寻找的类型：

Rich

Webkit浏览器（即Chrome和Safari）支持名为

-Webkit mask

的CSS属性，该属性允许您使用CSS3效果（即线性渐变）覆盖元素

以下样式表规则将淡入淡出的白色边缘应用于类为

.mask

的元素：

.mask{
-webkit掩码：-webkit线性渐变(
左边
rgba（255255,0），
rgba（255255,1）5%，
rgba（255255,1）95%，
rgba（255255,0）
);
}

---

不幸的是，这只在基于webkit的浏览器中起作用。如果您想支持其他所有功能（您可能会这样做），最好使用透明PNG。

您可以尝试在包含图像的div上插入阴影，或者在左侧或右侧使用具有起始阴影的单像素宽框。对于这些外部元素，您可以将一系列阴影应用到css中，从非常透明但很宽的阴影构建为相当不透明的阴影。也可以仅将这些阴影应用于元素的一侧

插图： （您必须使覆盖层高于图像的容器，但宽度相同，并将其浮动在顶部，如果高度相同，则阴影将从四面八方出现）

对于两端的图元，请使用法线框阴影

#end_overlay{
    width:2px;
    box-shadow: 0px 0px 10px 10px white;
    z-index:5;// higher than the container with the images
}

向左或向右浮动，它应该可以在任何理解覆盖的浏览器上工作，任何没有覆盖的浏览器都会忽略它。我认为你不需要在这些里面有任何东西，所以它将是一个看不见的物体，不会有阴影溢出

---

我已经看到过，它用于修改一些杂志应用程序的顶部和底部区域，因此文本在离开页面时似乎消失了。

也许你应该发布一些代码，以便人们可以就如何实现此效果提出一些建议？我找不到任何遗憾，但我认为可以通过在滑动条上添加png元素来实现，这样会使内容褪色。你需要的div数量（它认为）会让它变得非常慢。如果您的视觉是一个设定的大小，它将更容易创建一个单一的遮罩图像，并覆盖在“幻灯片”区域。除此之外，您还可以使用CSS3渐变。。。假设他们在一个端点上支持“透明”，但我不知道是否是这样，而且显然在IE中是行不通的：-（你把我从几个小时无用的编码中拯救了出来。我爱你。总是很乐意为你服务：）如果你喜欢答案，就投票吧！非常感谢你！这是我发现的淡出锚点元素以使其保持可点击的唯一方法。

#end_overlay{
    width:2px;
    box-shadow: 0px 0px 10px 10px white;
    z-index:5;// higher than the container with the images
}