Question

我正在使用jquery onmouseover更改图像的src，如下所示：

$( ".myimage" ).mouseover(function() {

   $('.myimage').attr('src', 'imageHover.png');

});

我的问题是......如何在上面的代码中添加过渡效果？

Answer 1

src属性没有CSS（＆lt; = 3）转换。您必须添加另一个img元素并使用jQuery的某种自定义转换（如.fadeOut）

例如，查看这些主题：

Animating "src" attribute

JQuery Switch Img Src with fade effect

如果您需要在图像悬停时效果正常，就像您在帖子中显示的那样，您可以使用两个不同的图像仅使用CSS。

默认情况下，仅显示常规图像。当容器为hover时，隐藏第一个不透明度：0及其CSS transition，并显示另一个。

<强> Working jsFiddle

div {
    position: relative;
}
img {
    position: absolute;
    transition: opacity 0.5s linear;
}
#b {
    opacity: 0;
}
div:hover #b {
    opacity: 1;
}
div:hover #a {
    opacity: 0;
}

Answer 2

你可以给出像这样的淡入淡出效果

$("#image").hover(function() {
    $("#image").fadeOut(1000, function() {
        $("#image").attr("src",$("#image").data("first"));
    }).fadeIn(1000);
    return false;
},function() {
    $("#image").fadeOut(1000, function() {
        $("#image").attr("src",$("#image").data("second"));
    }).fadeIn(1000);
    return false;
});

工作示例为here

Jquery Onmouseover改变了img attr的效果

2 个答案: