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

【问题标题】：How to fade to a different image on mouse over?如何在鼠标悬停时淡入不同的图像？
【发布时间】：2011-09-26 09:58:06
【问题描述】：

我有两张图片。我想配置它们，以便当您将鼠标悬停在默认图像上时，它会慢慢淡入第二个图像。怎么会这样？

谢谢！

【问题讨论】：

检查这些答案：stackoverflow.com/questions/1857827/…
如果有人将手从您的图像上移开，您是否考虑过必要的逻辑？它会回到默认值吗？会继续褪色吗？它会退缩吗？我之所以这么问，是因为在不褪色的情况下做到这一点非常非常简单，而褪色则需要更多代码。

【解决方案1】：

您可以使用 JQuery .animate effect。以下教程帮助我学习了如何使用它并准确显示了您正在寻找的内容。在鼠标悬停时淡入然后在鼠标移出时淡出的图像。 http://bavotasan.com/tutorials/creating-a-jquery-mouseover-fade-effect/

【讨论】：

【解决方案2】：

这样的事情应该可以工作：

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

这只是在鼠标悬停时淡出旧图像，一旦淡出完成，淡入新图像。

【讨论】：

【解决方案3】：

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

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

【讨论】：