Question

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

HTML

(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);

的Javascript

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

CSS

function arrayToObj(a) {

   //Create an empty object
   var obj = {};

   //Go through the array and add elements as properties to the object
   a.forEach(function(element, idx){
      obj[String(idx)] = element;       
   }) 

   return obj;

}

Answer 1

在fadeOut内回复代码。

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

//do fade in

});

样品

＆＃13;

(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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

当然可以，在jQuery动画中，第二个参数是动画完成后运行的函数。 More info

＆＃13;

(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',function(){
            		$('#test2').fadeIn('slow');
            });
        });
    };

})(jQuery);

$('#test').fadeDelay(4000);

＆＃13;

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

＆＃13;

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

＆＃13;

此处jsFiddle

CSS：替换淡出图像

2 个答案: