淡入淡出图像?

时间:2012-10-29 19:46:39

标签: jquery html css3

如何使图像在40%到100%之间不断淡入和淡出?

我尝试制作CSS3不透明度,但只支持0%和100%,所以它并没有真正消失。

任何想法如何制作?

3 个答案:

答案 0 :(得分:2)

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;

答案 1 :(得分:1)

这是你将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

答案 2 :(得分:0)

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