jQuery fadeIn / fadeOut

Question

本质上，我试图在指定的时间之后将div 1淡出。在div 1消失后不久，div 2就会消失。

https://jsfiddle.net/hwyw5ssf/5/

$("#title").hide(function(){
  $("#title").fadeIn(5000).next().delay('500', function(){
    $("#title").fadeOut(5000);
    $("#hub").hide(function(){
      $("#hub").fadeIn(5000);
    });
  });
});

Answer 1

我建议选择与我不同的div，在这方面，.next()是一个有用的函数，在本例中可以用来替换对'#hub‘的显式引用。

// hide all divs
$( 'div' ).hide()

// fade in: duration 1s on complete call function
$( '#title' ).fadeIn(1000, function(){

    // fade out: duration 1s, on complete call function
    $( '#title' ).fadeOut(1000, function(){

    // fade in: duration 1s
    $( '#hub' ).fadeIn(1000)
  })
})

Answer 2

我认为您正在寻找这个，只需使用setTimeout函数：

​

$(document).ready(function(){
    setTimeout(function(){
         $("#title").fadeIn(2000)
         $("#hub").fadeIn(4000)
        }, 2000);
        setTimeout(function(){
         $("#title").fadeOut(4000)
         $("#hub").fadeOut(2000)
        }, 2000);
});

#hub, #title{
  display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="title">Help please.</div>
<div id="hub">not sure what to do</div>

​

Answer 3

这是一个解决方案，https://jsfiddle.net/hwyw5ssf/6/

​

$('div').hide();
$('#title').fadeIn("slow", function(){
  $(this).fadeOut("slow", function(){
    setTimeout(function(){
      $('#hub').fadeIn("slow");
    }, 2000);
  });
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="title">Help please.</div>
<div id="hub">not sure what to do</div>

​

第一个div将立即fadeOut，第二个div将fadeout在第一个div的2sec之后。

在2秒的间隙里，我使用了setTimeout

希望这能帮到你。