javascript - CSS:替换淡出图像

Question

此代码在延迟后淡出加载的图像。蓝色圆圈淡出后是否可以淡入新图像？ http://jsfiddle.net/gabrieleromanato/8puvn/

html

<div id="test"></div>

Javascript

(function($) {

$.fn.fadeDelay = function(delay) {

    var that = $(this);
    delay = delay || 3000;

    return that.each(function() {

        $(that).queue(function() {

            setTimeout(function() {

                $(that).dequeue();

            }, delay);
        });

        $(that).fadeOut('slow');
    });
};

})(jQuery);

$('#test').fadeDelay(4000); 

CSS

#test {
margin: 2em auto;
width: 10em;
height: 10em;
background: #069;
border-radius: 50%;
}

Answer 1

在 fadeOut 回调中执行淡入代码。

$(that).fadeOut('slow', function(){

//do fade in

});

---

样本

(function($) {


  $.fn.fadeDelay = function(delay, awake) {
    $(awake).hide();
    var that = $(this);
    delay = delay || 3000;

    return that.each(function() {

      $(that).queue(function() {

        setTimeout(function() {

          $(that).dequeue();

        }, delay);
      });

      $(that).fadeOut('slow', function() {
        $(awake).fadeIn('slow');
      });
    });
  };

})(jQuery);

$('#test').fadeDelay(4000, "#test2"); //pass jquery selector, which element to show

.circle {
  margin: 2em auto;
  width: 10em;
  height: 10em;
  border-radius: 50%;
}
#test {
  background: #069;
}
#test2 {
  background: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="test" class="circle"></div>
<div id="test2" class="circle"></div>