Jquery Mouseover改变图像属性与效果答案

【问题标题】：Jquery Onmouseover change img attr with effectJquery Mouseover改变图像属性与效果
【发布时间】：2015-02-03 18:51:29
【问题描述】：

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

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

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

});

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

【问题讨论】：

标签： jquery

【解决方案1】：

src 属性没有 CSS (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;
}

【讨论】：

【解决方案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

【讨论】：