如何在鼠标上淡出到不同的图像？

Question

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

谢谢！

Answer 1

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

Answer 2

我认为你想在鼠标输入时淡入淡出，这里有一些东西要开始。

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

Answer 3

这样的事情应该有效：

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

这简单地淡化了鼠标悬停时的旧图像，一旦淡出完成，淡入新图像。