Jquery Onmouseover更改img攻击并生效

Question

我使用jquery onmouseover来更改这样的映像的src：

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

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

});

我的问题是..。如何向上面的代码添加转换效果？

Answer 1

<=3属性没有CSS ( src )转换。您必须添加另一个img元素，并使用jQuery (如.fadeOut)进行某种自定义转换。

例如，看看这些线程：

动画"src“属性

具有衰减效应的JQuery开关Img

如果您需要效果时，该图像是悬浮的，如您在您的文章中显示，您可以只使用CSS使用两个不同的图像。

默认情况下，只显示常规图像。当容器是hover时，用不透明度:0和它的CSS transition隐藏第一个容器，并显示另一个。

工作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;
});

工作示例是这里