jQuery fading two images without white

Question

I would like to fade image without white transfer between them.

HTML:

  

        
                      

              相关标签:
       
      

Answer 1

JQuery doesn't support background image animations like background color animation(which is also need to use extra plugin). So to do your animation, definitely you need to have two images.

Answer 2

This should give you an idea:

var c = 0,                  // Counter index
    $img = $('.image img'), // Get images
    n = $img.length;        // How many images?

$img.eq(c).show();          // Show c one

(function loop() {          // Recursive infinite loop
    $img.delay(1000).fadeOut(800).eq(++c%n).fadeIn(800, loop);
}()); 

.image{
  position:relative;
}
.image img{
  position:absolute;
  top:0px; 
  display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="image">
  <img src="http://placehold.it/300x150/bf0?text=Apples" alt="" />
  <img src="http://placehold.it/300x150/0bf?text=and" alt="" />
  <img src="http://placehold.it/300x150/fb0?text=Pears" alt="" />
</div>

Answer 3

This is because your using the same image on the animation end callback.

My suggestion: use position: relative; on the class="image" container, put the image element as position:absolute;, now after you are fading the image out insert a new image into the container and fade it in and remove the first image.

Example:

Html:

<div class="image">
  <span><img src="1.jpg"></span>
</div>

Css:

<style type="text/css">
    .image{position:relative;}
    .image span img{position:absolute;top:0;left:0;}
</style>

JavaScript:

<script type="text/javascript">
    $('.image > span > img').fadeOut(1000);
    var $image = $('<img alt="" src="YOUR NEW IMAGE_PATH" style="opacity:0;" />');
    $('.image > span').append($image);
    $image.fadeIn(1000, function(){
        $('.image > span > img').first().remove();
    });
</script>

Answer 4

Instead of fading out one image and then fading in another, use two image elements and layer them on top of each other, then just fade out the top one to make the bottom one appear instead.

CSS:

.image img { position: absolute; left: 0; top: 0; }

HTML:

<div class="image">
  <img class="bottomImage" src="http://placekitten.com/100/100"/>
  <img class="topImage" src="http://placekitten.com/g/100/100"/>
</div>

Javascript:

$('.topImage').fadeOut(3000);

Demo: http://jsfiddle.net/Guffa/grTUK/