一定时间后jQuery淡出DIV显示

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.

Answer 1

你可以这样做

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

Answer 2

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

Answer 3

Try

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

Thanks

Answer 4

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/

Answer 5

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