Javascript 单击时交叉淡入淡出图像过渡

我有一个非常简单的HTML页面，只有一个图像和一个按钮。这个想法是，当点击按钮时，图像会变成另一个图像

目前，我已经通过使用以下javascript成功地更改了单击按钮时的图像：

document.getElementById("img").src="img2.jpg";

---

但是，我想知道是否有一些简单易行的方法来进行转换，例如，仅使用javascript和css在两个图像之间进行交叉淡入淡出。

这可以通过一步一步的过程完成：

在原始图像的相同位置创建img元素

增加所述元素的z指数

隐藏元素

将元素添加到DOM中

慢慢地淡入视野

请参见下面的工作片段：

SOLN 1：使用纯Javascript&

filter:alpha

而不使用CSS3，即使对于IE-5+这样的旧浏览器也是如此：

function act（）{
var元素=document.createElement（“img”）；
element.src=”http://placekitten.com.s3.amazonaws.com/homepage-samples/408/287.jpg";
var op=0.1；//初始不透明度
element.style.opacity=op；
document.body.appendChild（元素）；
element.style.display='block'；
var timer=setInterval（函数（）{
如果（op>=1）{
清除间隔（计时器）；
}
element.style.opacity=op；
element.style.filter='alpha（不透明度='+op*100+”）；//IE 5+支持
op+=op*0.1；
}, 50);
}

img{
位置：绝对位置；
顶部：30px；
左：0px；
宽度：300px；
高度：300px；
}

淡入淡出变化

淡入淡出图像。 这是最简单的方法，但不会出现交叉褪色

CSS:

JS:

var img = document.getElementById('i');
setInterval(function() { 
  img.className += ' hidden';
  img.src="http://lorempixel.com/400/200/";

  setTimeout(function() {
    img.className = img.className.replace('hidden', '');
  }, 100);
}, 1000);

---

您可以将一个

img

垂直放置在另一个上方，然后给一个

img

一个

1

的

opacity

和另一个

img

一个

0

的

opacity

然后，当点击

按钮时，不透明的
img
将
转换为
0
的
opacity
，透明的
img
将转换为
1
的
opacity

示例：


var images=document.getElementsByTagName（'img'）；
var button=document.getElementsByTagName（'button'）[0]；
函数crossFade（）{
对于（var i=0；i
按钮，.images{
显示：内联块；
位置：相对位置；
利润率：24px；
垂直对齐：中间对齐；
}
.image-1、.image-2{
位置：绝对位置；
排名：0；
左：0；
过渡：放松；
}
.图像、.image-1、.image-2{
宽度：140px；
高度：140像素；
}
.图-1{
背景色：rgb（255,0,0）；
}
.图-2{
背景色：rgb（255255,0）；
}
.不透明{
不透明度：1；
}
.透明{
不透明度：0；
}
交叉淡入
如果要在“图像A”淡出时淡入“图像B”

我想你可以先让“图像B”放在“图像A”的上面，但要使其
opacity:0

此外，您还可以使用
转换延迟
，它可以允许“图像B”的转换

推迟一点

我猜这就是你所说的“交叉褪色”


结论
“图像B”位于“图像A”之上，但它将是透明的
当用户单击“图像A”时，我们在“图像A”上添加“淡出”类，在“图像B”上添加“淡入延迟”类
“淡出”完成后，在“图像A”上添加“隐藏”类
我假设你不想要jquery？我是一个初学者，而且我从来没有使用过它，所以如果它只能用javascript/css来执行，那将非常有帮助，但是如果jquery有一个非常简单的方法，我也可以学习它！不，没有简单的方法可以做到这一点（简单的意思是CSS一行）。您可以通过重叠新旧图片（有两个
img
元素）来实现。只要你改变
src
图像就会立即改变。是的，它会立即改变，这就是为什么我认为进行某种转换会很酷，但我已经搜索了一段时间，找不到任何只适用于js/css的东西……这几乎正是我想要的，但是有可能进行交叉淡入吗？我的意思是，不是第一个褪色，第二个出现，而是在第一个上面出现第二个，也许吧？@MartaSampietro done！！点击编辑，这是一个交叉，正如你所期待的我认为它会！我只是想让它适应我的页面，因为我有一些样式，现在我想让它看起来很漂亮。但是，是的，非常感谢，它符合我的要求！啊，好的。旧式浏览器兼容性足够公平。；-）如果新浏览器要花很多钱，那么我会理解的。如果新浏览器的安装需要几个小时，我会理解的。但是新浏览器的安装需要2-3分钟，而且是免费的。我敢肯定，我会毫不犹豫地向一个拥有黑白电视的人解释：“不，你不能看彩色电视，除非你插上电源并打开这个免费的彩色电视。如果你不想这样做，那也没关系，但你会看黑白电视。”很高兴看到使用了CSS动画，以获得最佳可用性能。@Timviseée OP在评论中提到，他没有使用
jQuery
。
var img = document.getElementById('i');
setInterval(function() { 
  img.className += ' hidden';
  img.src="http://lorempixel.com/400/200/";

  setTimeout(function() {
    img.className = img.className.replace('hidden', '');
  }, 100);
}, 1000);