jquery - jquery fadeIn/Out el 然后fadeIn/Out new el

Question

抱歉标题随意编辑，

无论如何，这是我到目前为止的代码

$('#foo').click(function() {

  $('#foo2').html('<h4>Please wait...</h4>').fadeOut('fast');

  var sful = $('#foo3').fadeIn('fast').html('<h4>Success!</h4>').fadeOut('slow');
  setTimeout(sful, 4000);

});

我试图让#foo2在点击时淡入淡出，然后让它淡入淡出，然后#foo3 (var sful) 在之后淡入/淡出。

Answer 1

$('#foo2').html('<h4>Please wait...</h4>').fadeOut('fast', function() {
  var sful = $('#foo3').fadeIn('fast').html('<h4>Success!</h4>').fadeOut('slow');
  setTimeout(sful, 4000);
});

回调(将function() { ..在动画完成后运行。请参阅http://api.jquery.com/fadeOut/（特别是该[,callback]部分）。

Answer 2

$('#foo2')
          .html('<h4>Please wait...</h4>')
          .fadeOut('fast', function() {  // callback start after fadeOut()
                             setTimeout(function() {
                                 $('#foo3')
                                       .fadeIn('fast')
                                       .html('<h4>Success!</h4>')
                                        .fadeOut('slow');
                              }, 4000);
                           });