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/，但我无法更新我的代码使其与之一起运行。

- user2086252

---

将您的图像放入一个带有所需背景颜色的 div 中。 - kraYz

@kraYz 我不希望在图像之间改变任何颜色。将它们像彼此叠放一样处理。 - user2086252

@kraYz 那绝对不是正确的方法，但同时淡化两张图片。 - Roko C. Buljan

@user2086252 在SO上已经有很多类似的问题得到了回答（我也回答过），请仔细查看。 - Roko C. Buljan

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>

- Roko C. Buljan

Answer 2

这是因为您在动画结束回调中使用了相同的图像。

我的建议：在“class =”image“”容器上使用“position：relative；”，将图像元素放置为“position：absolute；”，现在在淡出图像后，将一个新图像插入容器并淡入并删除第一个图像。

示例：

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>

- udidu

Answer 3

JQuery不支持背景图片动画，就像背景颜色动画一样（这也需要使用额外的插件）。因此，为了进行动画制作，您肯定需要有两张图片。

- Ryxle

---

（离题）如果您认为我的评论有冒犯之处，我深感抱歉。我的本意是提供一些建议，以便改进答案。我会注意自己的言行举止。祝编码愉快。 - Roko C. Buljan

Answer 4

不要使用淡出一个图像再淡入另一个图像的方式，而是使用两个图像元素并将它们层叠在一起，然后只需淡出顶部的图像，以显示底部的图像。

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

演示：http://jsfiddle.net/Guffa/grTUK/

- Guffa