javascript - 如何在鼠标悬停时淡入不同的图像？

Question

我有两张图片。我想配置它们，以便当您将鼠标悬停在默认图像上时，它会慢慢淡化到第二张图像。如何解决这个问题？

谢谢!

Answer 1

我假设您想在鼠标移出时淡入淡出，这是开始的事情。

// 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');
    });  
});