jQuery fading two images without white

问题

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

HTML:

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

jQuery:

$('.image > span > img').fadeOut(1000, function() {
  $('.image > span > img').attr('src', images[i]);
  $(this).fadeIn(1000);
});

This works, but there is white fade between changing. Images array contains image sources. I found this http://jsfiddle.net/byB6L/ but I can not update my code to work with that.

回答1:

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>

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

回答3:

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/

回答4:

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.

来源：https://stackoverflow.com/questions/14975104/jquery-fading-two-images-without-white

标签

jquery

image

fade