How can I fade out a div using jQuery?

Question

Is there any way to fadeout a div after 5 Seconds without using a setTimeOut function?

Answer 1

Assuming you mean 'wait five seconds and then fade out', I think you'll have to use a plugin to force the delay, eg this one

Answer 2

everyone knows that in jquery 1.4 there's a delay function now, right?

$('#div').delay(5000).fadeOut(400)

that's how you do it, without having to add any custom functions or plug-ins. it's native to jquery 1.4

Answer 3

// i use this pause plugin i just wrote

$.fn.pause = function(duration) {
    $(this).animate({ dummy: 1 }, duration);
    return this;
};

Call it like this :

$("#mainImage").pause(5000).fadeOut();

Note: you don't need a callback.

Answer 4

Case 1: if you want to start fadeOut after 5 seconds, use this:

jQuery.fn.delay = function(time,func){
    return this.each(function(){
        setTimeout(func,time);
    });
};

Then, use it like this:

$('#div').delay(5000, function(){$(#div').fadeOut()})

You can't achieve this without using setTimeOut at all

Case 2: if you want the duration of fadeOut to be 5 seconds, use this:

$('#div').fadeOut(5000)

Answer 5

Not sure if you want it to take 5 seconds or start in 5 seconds.

For it to take 5 seconds: The jQuery fadeout function can be used on a div, and it will reduce the element's opacity until it is 0 and then display none the div. The speed of the fade is a parameter for the function.

http://docs.jquery.com/Effects/fadeOut#speedcallback

To start it in 5 seconds, you'll need some sort of timer that starts when the document or window is ready, or when the div is ready depending on what you want.

Answer 6

I just had the same problem and in my opinion the marked answer doesn't actually really satisfy the question. If one specifies it like

$("#myDiv").fadeOut(5000);

as suggsted, the fading process itself will last for 5 seconds, but not start after 5 seconds.

So I was searching for an alternative, without having to include another jQuery plugin etc. The simplest solution I came up with was to write it as follows:

$("#myDiv").fadeTo(5000,1).fadeOut(1000);

It uses the fadeTo effect and it is somehow a "hack". I let the fadeTo run for 5 seconds and let it fade to 1 = 100% opacity. In this way the user doesn't perceive any change. Afterwards the normal call to fadeOut with a duration of the effect of 1 second.

I guess this solution is quite simple since it doesn't require any additional plugin and can be written in 1 line.

Cheers.

//EDIT:
Apparently there is now the possibility to do something like this:

$('#myDiv').delay(800).fadeOut(1000);

Here are some more cool, useful functions.