Javascript 如何在鼠标上方淡入不同的图像？

我有两张照片。我想对它们进行配置，以便当您将鼠标移到默认图像上时，它会慢慢淡入第二个图像。怎么能这样呢

谢谢

您可以使用JQuery。下面的教程帮助我学习了如何使用它，并准确地显示了您正在寻找的内容。一种图像，在鼠标上方淡入淡出。

---

我假设你想在鼠标移出时淡入，这里有一些东西可以开始使用

// markup
<div id="imgs">
    <img src="..." id="i1">  <!-- this is the mouseover image -->
    <img src="..." id="i2">  <!-- this is the default image -->
</div>


// css
img {
    display:block;
    position:absolute;
    top: 0;
    left: 0;
 }


// jQuery
$(function() {
    $('#imgs')
    .mouseenter(function() {
        $('#i2').fadeOut('slow');
    })
    .mouseleave(function() {
        $('#i2').fadeIn('slow');
    });  
});

//标记
//css
img{
显示：块；
位置：绝对位置；
排名：0；
左：0；
}
//jQuery
$（函数（）{
$（“#imgs”）
.mouseenter（函数（）{
$（'#i2'）。淡出（'slow'）；
})
.mouseleave（函数（）{
$（'i2'）.fadeIn（'slow'）；
});  
});

类似的方法应该可以：

$('#first_image').mouseover( function() { 
    $(this).fadeOut('fast', function() {
        $('#new_image').fadeIn('slow');
    }
}

---

这只需在鼠标上方淡出旧图像，淡出完成后，新图像就会淡出。

检查这些答案：如果有人把手从你的图像上移开，你是否考虑过必要的逻辑？它是否返回到默认值？它会继续褪色吗？它会退色吗？我这样问是因为这样做没有衰落是非常简单的，与衰落是更多的代码。