特定时间后淡出图像

Question

我希望我的页面打开一张图片,我希望该图片在10秒后淡出.哪种方式是我能做到的最佳方式？有什么方法可以用Css3做到吗？

Answer 1

只要你给出了淡出一个元素id(或者有一些方法可以从JavaScript引用它):

window.setTimeout(
    function(){
        $('#pictureID').fadeOut('slow');
    },10000);

JS小提琴演示.

我假设您正在使用图像作为闪屏,各种各样的？如果是这样,那么您可以使用position: absolute该图像定位在页面内容上,然后淡出以显示下面的内容(JS Fiddle演示).

但是,如果您还希望用户能够hover覆盖图像以将其固定到位,则可以使用以下内容(上述内容,但需要进行一些修改):

var fadeAnim = window.setTimeout(
    function(){
        $('#i').fadeOut('slow');
    },10000);

$('#i').hover(
    function(){
        window.clearTimeout(fadeAnim);
    },
    function(){
        $(this).fadeOut(500);
    });

JS小提琴演示.

参考文献:

• JavaScript(来自Mozilla Developer Network的JavaScript资源):
  • window.setTimeout().
  • window.clearTimeout().
• jQuery(来自jQuery API):
  • fadeOut().