jQuery fade-out DIV display after certain set time

Question

I have the following code and would like to hide a DIV (.video-field-new) after a specified amount of time after the page loads, for example 5 seconds. Is that possible?

<div id="BodyField">
    <div class="video-field-new"></div>
</div>

And bonus if I could have it fade-out instead of just disappearing as the user will see this occurring.

I'm not sure I get your question. Did you try something ? What ? — Denys Séguret, Feb 27 '13 at 17:51
possible duplicate of [fade out div after x seconds with jquery](http://stackoverflow.com/questions/13425347/fade-out-div-after-x-seconds-with-jquery) — Wesley Murch, Jul 11 '14 at 04:39

score 46 · Answer 1 · answered Feb 27 '13 at 17:52

46

You can do it in this way

$("#BodyField").delay(5000).fadeOut();

answered Feb 27 '13 at 17:52

Starx

77,474
47
185
261

pretty clean solution. I like it. Thanks. – Uresh K Sep 21 '16 at 16:56

score 21 · Accepted Answer · answered Feb 27 '13 at 17:50

21

$(window).load(function(){
  setTimeout(function(){ $('.video-field-new').fadeOut() }, 5000);
});

answered Feb 27 '13 at 17:50

Denys Séguret

372,613
87
782
758

Although Starx answer is short and readable, it doesn't specifically pay regard to the "page load" that the OP asked for so +1 for both answers. – David Bridge Apr 18 '17 at 12:30

score 1 · Answer 3 · answered Oct 10 '17 at 06:47

1

Try

$('#div').fadeIn('fast').delay(1000).fadeOut('fast');
$('#div-inner').fadeIn('slow').delay(1000).hide(0);

Thanks

answered Oct 10 '17 at 06:47

subindas pm

2,668
25
18

score 0 · Answer 4 · answered Mar 03 '17 at 13:18

Even We can do like this: in html

    <div id="BodyField">
        <div class="video-field-new">
      <p>This is your DIV with text which will fade Out after delay 5s using jQuery</p>
      <p>This is your DIV with text which will fade Out after delay 5s using jQuery</p>
      <p>This is your DIV with text which will fade Out after delay 5s using jQuery</p>
      <p>This is your DIV with text which will fade Out after delay 5s using jQuery</p>

    </div>
</div>

in js:

$(function() {
    $('.video-field-new').delay(5000).show().fadeOut('slow');
});

in css:

div { 
    width:200px; 
    height:80px; 
    float:left; }

For Demo Click on Link https://jsfiddle.net/kingtaherkings/133v70se/

score 0 · Answer 5 · answered May 21 '21 at 14:31

You can also do something like this

$(document).ready(function(){
    $('.video-field-new').fadeOut(5000)
})

$(selector).fadeOut(speed,easing,callback)

Parameter | Description

speed = Optional. Specifies the speed of the fading effect. Default value is 400 milliseconds

Possible values:

milliseconds
"slow"
"fast"

easing = Optional. Specifies the speed of the element in different points of the animation. Default value is "swing"

Possible values:

"swing" - moves slower at the beginning/end, but faster in the middle
"linear" - moves in a constant speed

callback = Optional. A function to be executed after the fadeOut() method is completed

for more information check this doc https://www.w3schools.com/jquery/eff_fadeout.asp

jQuery fade-out DIV display after certain set time

5 Answers5