12

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.

2

5 Answers 5

46

You can do it in this way

$("#BodyField").delay(5000).fadeOut();
1
  • pretty clean solution. I like it. Thanks.
    – Uresh K
    Sep 21, 2016 at 16:56
21
$(window).load(function(){
  setTimeout(function(){ $('.video-field-new').fadeOut() }, 5000);
});
1
  • 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. Apr 18, 2017 at 12:30
1

Try

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

Thanks

0

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/

0

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.