淡入淡出圖像？

如何讓圖像在40％到100％之間不斷變化？淡入淡出圖像？

我試着做一個CSS3的不透明度，但只支持0％和100％，所以它不會褪色。

任何想法如何做到這一點？

來源

2012-10-29 Marko Livendo

使用jquery淡入淡出以獲得預期的效果 – kingkode

「但[CSS3不透明度]僅支持0％和100％」聽起來不太可能。 –

@McMastermind會試試看。 –

CSS不透明度支持全範圍...

只是十進制格式。

編輯：增加了跨瀏覽器的不透明度。

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

來源

2012-10-29 19:50:24 ahren

我試過了，但沒有運氣。這就是爲什麼我來這裏問，因爲這是我曾經習慣的方法。 –

@MarkoLivendo - 您可能有一個瀏覽器不支持標準的「不透明」聲明。我已經更新上面添加一個跨瀏覽器方法來應用不透明度。 – ahren

這是你如何運用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

來源

2012-10-29 19:50:57

謝謝lto。但是，我將如何讓它不斷運行？而且再次淡化，因爲這隻會淡化到40％..對吧？ –

我已更新我的代碼。我想知道更多，你真正想要做什麼，來幫助你。 –

阿德里安說的是正確的但是如果你像我一樣的可怕與CSS，你可以在那裏使用TwitterBootstrap褪色類以及所有其他很酷的事情可以做，可以幫助你多一點。

來源

2012-10-29 19:52:57 Robert

不像Bootstrap就像jquery庫？ –

淡入淡出圖像？

回答

相關問題