我希望我的頁面可以打開一張圖片,並且我希望該圖片在10秒鐘後淡出。哪種方式是我可以做到的最好方式?有什麼辦法可以用Css3做到嗎?特定時間後的圖像褪色
2
A
回答
6
只要你給的元素淡出的id
(或有某種方式從JavaScript引用它):
window.setTimeout(
function(){
$('#pictureID').fadeOut('slow');
},10000);
我假設你使用的圖像作爲閃屏,各種?如果是這樣,則可以使用position: absolute
將該圖像放在頁面內容上,然後淡出以顯示下面的內容(JS Fiddle demo)。
但是,如果你也希望用戶能夠hover
在圖像上舉行的地方那麼下面可以使用(如上所述,但一對夫婦的修正):
var fadeAnim = window.setTimeout(
function(){
$('#i').fadeOut('slow');
},10000);
$('#i').hover(
function(){
window.clearTimeout(fadeAnim);
},
function(){
$(this).fadeOut(500);
});
參考文獻:
- 的JavaScript(從Mozilla Developer Network's JavaScript resource):
- jQuery的(從jQuery API):
4
setTimeout(function() {
$('.imgClass').fadeOut('slow')
}, 10000);
1
你將不得不使用Javascript功能來做到這一點。你可以通過CSS3使用Javascript(我們的jQuery),但對於跨瀏覽器問題,你最好在完整的jQuery中完成。爲此,可以使用load(),delay()和fadeOut()。
嘗試:
$('#yourImg').ready(function(){
$(this).delay(10000).fadeOut();
});
1
您可以使用setTimeout()
延遲淡入淡出的開始,然後您可以使用jQuery的淡出出來(或其他JavaScript庫如mootools的),或者你可以添加一個類到元素並使用css3轉換進行轉換。由於jQuery版本已經發布,我會發布css3版本。 http://jsfiddle.net/Tentonaxe/3Vnt7/
CSS:
#demo {
transition: opacity 2s ease-in;
-moz-transition:opacity 2s ease-in;
-o-transition: opacity 2s ease-in;
-webkit-transition: opacity 2s ease-in;
border: 4px solid green;
background-color: #ededed;
width: 75px;
height: 75px;
}
.hidden {
opacity: 0.0;
}
HTML:
<div id="demo"></div>
的Javascript:
setTimeout(function(){
document.getElementById('demo').className = "hidden";
},10000);
相關問題
- 1. 圖像褪色
- 2. 使用attr SRC圖像之間褪色
- 3. iphone中圖像的褪色
- 4. 將正常圖像的背景圖像褪色爲褪色圖像
- 5. 用actionscript褪色圖像
- 6. 背景圖像褪色jquery
- 7. 褪色圖像 - 鞦韆
- 8. jquery褪色背景圖像
- 9. 隨着時間的推移統一褪色圖像alpha
- 10. 褪色背景圖像與圖像ontop
- 11. 從黑色中褪色圖像
- 12. 加載頁面後,從灰色背景圖像褪色
- 13. 在特定時間後更改顏色
- 14. jquery褪色懸停圖像的精靈
- 15. jquery的褪色爲背景圖像
- 16. jquery的陣列圖像褪色背景
- 17. 從DIV褪色到圖像中的jQuery
- 18. 翻轉褪色的流體圖像
- 19. 在IE7-8中褪色透明圖像
- 20. 使BoxDecoration圖像褪色/透明
- 21. 混合/褪色圖像與背景
- 22. 在幻燈片圖像褪色徘徊
- 23. 背景圖像不會褪色
- 24. 褪色切換兩個圖像
- 25. javascript/jquery:尋找圖像褪色腳本
- 26. 與jQuery在背景圖像中褪色
- 27. jquery更改圖像與褪色翻轉
- 28. 與css3褪色背景圖像
- 29. java腳本圖像變化和褪色
- 30. 使用指令點擊圖像時的角度褪色
什麼是加價的頁面?你試過了什麼? – 2011-12-14 23:07:01