如何在鼠标上淡入不同的图像?

I have two images. I would like to configure them so that when you mouseover the default image, it slowly fades to the second image. How could one go about this?

我有两个图像。我想对它们进行配置，以便当鼠标移过默认图像时，它会慢慢地淡出到第二个图像。我们怎么能这样做呢?

Thanks!

谢谢!

3 个解决方案

#1

I've assumed that you want to fade back in when you mouseout, here's something to be getting started with.

我假设你想在鼠标离开时淡出，这里有一些东西要开始。

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

#2

Something like this should work:

像这样的东西应该可以:

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

This simply fades out the old image on mouse over, and once the fadeout is complete, fades in the new one.

这简单地将鼠标上的旧图像淡出，一旦淡出完成，就会在新图像中淡出。

#3

You could use the JQuery .animate effect. The following tutorial helped me learn how to use it and shows exactly what you're looking for. An image that fades in on mouseover and then out on mouseout. http://bavotasan.com/tutorials/creating-a-jquery-mouseover-fade-effect/

您可以使用JQuery . animated effect。下面的教程帮助我学习如何使用它，并展示了您正在寻找的内容。鼠标移到鼠标移到鼠标移到鼠标移出的图像。http://bavotasan.com/tutorials/creating-a-jquery-mouseover-fade-effect/

#1