jQuery 淡入淡出两个图像没有白色

Question

我想淡化图像，而图像之间没有白色转移。

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

这可行，但变化之间会出现白色褪色。 Images 数组包含图像源。 我找到了这个http://jsfiddle.net/byB6L/但我无法更新我的代码来使用它。

Answer 1

这应该会给你一个想法:

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>