jQuery使两个图像褪色而不显示白色

我想淡入他们之间没有白色转移图像

HTML:

这是可行的，但在变化之间会出现白色褪色。图像数组包含图像源。

---

我发现了这一点，但我无法更新我的代码来处理它。

与其先淡出一个图像，然后淡入另一个图像，不如使用两个图像元素并将它们层叠在一起，然后淡出顶部的图像，使底部的图像出现

CSS:

HTML:

---

演示：

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

我的建议：使用

位置：相对

在

class=“image”

容器上，将图像元素放置为

位置：绝对，现在在淡入淡出图像后，将新图像插入容器，淡入淡入并删除第一个图像

例如：

Html:



Css:


.image{位置：相对；}
.image span img{位置：绝对；顶部：0；左侧：0；}

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>


$（'.image>span>img'）.fadeOut（1000）；
变量$image=$（''）；
$（'.image>span'）。追加（$image）；
$image.fadeIn（1000，函数（）{
$（'.image>span>img'）.first（）.remove（）；
});
这应该给你一个想法：


var c=0，//计数器索引
$img=$（'.image-img'），//获取图像
n=$img.length；//有多少张照片？
$img.eq（c.show（）；//显示c一
（函数loop（）{//递归无限循环
$img.delay（1000）.fadeOut（800）.eq（++c%n）.fadeIn（800，循环）；
}()); 
.image{
位置：相对位置；
}
.图像img{
位置：绝对位置；
顶部：0px；
显示：无；
}

JQuery不支持背景图像动画，如背景颜色动画（也需要使用额外的插件）。因此，要制作动画，您肯定需要两幅图像。
将图像放入一个具有所需背景颜色的div中。@kraYz我不希望图像之间有任何颜色变化。改变他们就像彼此的顶部一样。@kraYz这绝对不是办法，但同时褪色2images@user2086252在这里，我也已经回答了很多类似的问题。仔细看一看。（话题外）如果你觉得我的评论冒犯了你，我真的很抱歉，这不是我的本意，而是给你一些建议，也许可以改进答案。我会致力于我的道德规范。快乐编码
$('.image > span > img').fadeOut(1000, function() {
  $('.image > span > img').attr('src', images[i]);
  $(this).fadeIn(1000);
});

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

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

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

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

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

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