CODEWITHSUNDEEP
javascriptjquerycss
Extelliqent
Extelliqent

Reputation: 1856

Fading image after specific amount of time

I want my page to open with a picture and I want that picture to fade-out 10 seconds after. Which way is the best way I can do it ? Is there any way I can do it with Css3 ?

Upvotes: 3

Views: 3668

Answers (4)

David Thomas
David Thomas

Reputation: 253446

So long as you've given the element to fade out an id (or have some way to reference it from JavaScript):

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

JS Fiddle demo.

I'm assuming that you're using the image as a splash screen, of sorts? If so, then you can use position: absolute to position that image over the content of the page, and then fade out to reveal the contents below (JS Fiddle demo).

If, however, you also want the user to be able to hover over the image to hold it in place then the following could be used (the above, but with a couple of amendments):

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

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

JS Fiddle demo.

References:

Upvotes: 7

Kevin B
Kevin B

Reputation: 95066

You can use setTimeout() to delay the start of the fade, and then you can fade it out using either jquery(or another javascript library such as mootools) or you can add a class to the element and have it transition using a css3 transition. Since the jQuery version has already been posted, i'll post the css3 version. 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);

Upvotes: 1

Jibou
Jibou

Reputation: 449

You will have to use Javascript to do that. You can cross Javascript (our jQuery) with CSS3 but for cross-browser issue you'd better do it in full jquery. To do so, you can use load(), delay() and fadeOut().

Try :

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

Upvotes: 1

Fabi&#225;n Heredia Montiel
Fabi&#225;n Heredia Montiel

Reputation: 1687

setTimeout(function() {
    $('.imgClass').fadeOut('slow')
}, 10000);

Upvotes: 4

Related Questions