jquery - 淡入淡出图像？

Question

如何让图像在 40% 到 100% 之间不断淡入淡出？

我尝试制作 CSS3 不透明度，但它只支持 0% 和 100%，所以它不会真正褪色。

任何想法如何做到这一点？

Answer 1

CSS Opacity 支持全系列...

只是十进制格式。

编辑：添加跨浏览器不透明度。

-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
filter: alpha(opacity=40);
-moz-opacity: 0.4;
-khtml-opacity: 0.4;
opacity:0.4;

Answer 2

这就是您将 jQuery 应用于这种情况的方式：

淡出到 40%

function fadOut() {
    $('img').animate({'opacity':'0.4'}, 500); // 500 is the time in milliseconds
}

淡入 100%

function fadIn() {
    $('img').animate({'opacity':'1.0'}, 500); // 500 is the time in milliseconds
}

要不断运行它，请尝试

var timer = setTimeout(fadOut, 1000); // after every 1 sec it will fadOut

clearTimer(timer); // to clear the timer

Answer 3

Adrian 说的是正确的，但是如果你像我一样并且对 CSS 很糟糕，你可以使用TwitterBootstrap那里的淡入淡出类以及你可以做的所有其他很酷的事情可能会对你有所帮助。