普通javascript，而不是CSS或jQuery，淡入淡出图像更改

我知道这在jQuery中是相当容易的，但我想用简单的“ol”将永远存在的javascript来实现这一点

我的页面上有一个下拉选择。我从8个选项中选择一个。页面上会显示一个默认图像。当我选择一个选项时，图像将更改为该图片。一切都很好

但我想让图像变为淡入淡出的切换，因为我和你们大多数人一样，不能很好地离开。我们必须继续摆弄

我拥有的javascript是由select下拉列表上的onchange=“setPicture（）”触发的：

function setPicture(){
    var img = document.getElementById("mySelectTag");
    var value = img.options[img.selectedIndex].value;
    document.getElementById("myImageDiv").src = value;
}

这个很好用。所选索引的值是一个字符串，其中包含每个图像的路径。我只想要一个淡出然后淡入的地方。我在修改src之前调用了另一个函数，但运气不好

---

有人能给我指出正确的方向吗

更简单的方法是单独使用

但是，从javascript中可以看出，这是为实现这一点而设计的

下面是示例中的一个快速修改，与您的案例相匹配

函数setPicture（）{
艾丽丝.动画(
[
{不透明度：1}，
{不透明度：.1}，
{不透明度：1}
], {
时长：3000，
迭代：无穷大
}
)
}

不透明动画

如何将图像默认CSS设置为不透明度为0且具有过渡时间 然后在JavaScript中，只需添加一个将不透明度设置为1的类

HTML: 
    <img class="img1" src="sampleimg.jpg">

CSS: 
    .img1 {
        opacity: 0;
        transition: all .3s;
    }
    .img1.show {
        opacity: 1;
    }

JS:
    function setPicture() {
        var img = document.querySelector('.img1');
        img.src = 'urlofnewimage';
        img.classList.add('show');
    }

HTML：
CSS:
.img1{
不透明度：0；
过渡：全部3秒；
}
.img1.show{
不透明度：1；
}
JS:
函数setPicture（）{
var img=document.querySelector（'.img1'）；
img.src='urlofnewimage'；
img.classList.add（'show'）；
}

---

希望这有帮助。

只需一个功能：

function fadeOutEffect(target) {
    var fadeTarget = document.getElementById(target);
    fadeTarget.style.opacity = 1;
    fadeTarget.style.transition = "opacity 2s";
    fadeTarget.style.opacity = 0;
    setTimeout(function(){
        fadeTarget.style.display = "none";
    }, 2000);;
}

---

本机淡入淡出（实际上，jQuery淡入淡出，在幕后）的可能重复依赖于间隔以及元素的

不透明度的递增或递减。利用CSS3转换会容易得多