在特定时间后褪色的图像

Fading image after specific amount of time

本文关键字：图像 褪色 定时间      更新时间：2023-09-26

我希望我的页面以一张图片打开，并希望该图片在10秒后淡出。我能做的最好的方法是什么?有什么方法可以在Css3中做到吗?

只要你给元素淡出id(或有某种方式从JavaScript引用它):

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

JS Fiddle demo.

我猜你是用这张图片作为启动屏幕，某种形式?如果是这样，那么您可以使用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 Fiddle demo.

引用:

  • JavaScript(来自Mozilla Developer Network的JavaScript资源)
    • window.setTimeout() .
    • window.clearTimeout() .
  • jQuery(来自jQuery API)
    • fadeOut() .
setTimeout(function() {
    $('.imgClass').fadeOut('slow')
}, 10000);

您必须使用Javascript来做到这一点。你可以将Javascript(我们的jQuery)与CSS3交叉使用，但为了跨浏览器问题，你最好使用完整的jQuery。为此，您可以使用load()， delay()和fadeOut()。

试题:

$('#yourImg').ready(function(){
$(this).delay(10000).fadeOut();
});

你可以使用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);
相关文章：