Question

我有这张桌子。里面有4个图像，它们应该在悬停时改变它们的src，当鼠标悬停时返回到原始的src。

<table>
  <tr>
    <td><a target="_blank" href="https://www.facebook.com/" class="social"><img src="files/img/fb_circle.png" data-src="files/img/fb_circle_hover2.png" /></a></td>
    <td><a target="_blank" href="https://twitter.com/" class="social"><img src="files/img/tw_circle.png" data-src="files/img/tw_circle_hover2.png" /></a></td>
  </tr>
  <tr>
    <td><a target="_blank" href="https://www.youtube.com/" class="social"><img src="files/img/yt_circle.png" style="top:100px" data-src="files/img/yt_circle_hover2.png" /></a></td>
    <td><a target="_blank" href="https://soundcloud.com/" class="social"><img src="files/img/sndcl_circle.png" style="top:100px" data-src="files/img/sndcl_circle_hover2.png" /></a></td>
  </tr>
</table>

这是我到目前为止所建立的：

$(".social").on({
    mouseenter: function () {
        $(this).fadeOut(250, function () {
            $(this).attr("src", $(this).attr("data-src"));
        }).fadeIn(250);
    },
    mouseleave: function () {
        $(this).fadeOut(250, function () {
            $(this).attr("src", $(this).attr("src"));
        }).fadeIn(250);
    }
});

但不幸的是$(this)似乎没有针对正确的元素。

这是我创建的JsFiddle http://jsfiddle.net/HpmN7/918/ 。在左侧，您可以看到单个图像。 src的更改在悬停时起作用，但在鼠标移动时不会返回到原始src。

Answer 1

您需要保留原始的src网址。你可以这样做：

$(".social").on({
    mouseenter: function () {
        $(this).data("original-src", $(this).attr("src"))
            .fadeOut(250, function () {
                $(this).attr("src", $(this).attr("data-src"));
            }).fadeIn(250);
    },
    mouseleave: function () {
        $(this).fadeOut(250, function () {
            $(this).attr("src", $(this).data("original-src"));
        }).fadeIn(250);
    }
});

错误是当您触发mouseLeave时，您将src设置回原来的src（淡出图像）。

JSFiddle：http://jsfiddle.net/HpmN7/920/

Answer 2

只需将旧源存储在变量中，然后使用它来更新mouseleave上的源。这意味着您不必额外查询DOM。

（Demo）

var oldsrc;
$(".social").on({
    mouseenter: function () {
        oldsrc = $(this).attr("src");
        $(this).fadeOut(250, function () {
            $(this).attr("src", $(this).attr("data-src"));
        }).fadeIn(250);
    },
    mouseleave: function () {
        $(this).fadeOut(250, function () {
            $(this).attr("src", oldsrc);
        }).fadeIn(250);
    }
});

Answer 3

检查此http://jsfiddle.net/2knt67u1/1/

$(".social").mouseover(function () {
    var src = $(this).find('img').attr('src');
    var dataSrc = $(this).find('img').attr('data-src');
    $(this).fadeOut(250,function(){
        $(this).find('img').attr('src',dataSrc);
        $(this).find('img').attr('data-src',src);
    });
    $(this).fadeIn(250);
});
$(".social").mouseout(function () {
    var src = $(this).find('img').attr('src');
    var dataSrc = $(this).find('img').attr('data-src');
    $(this).fadeOut(250, function () {
        $(this).find('img').attr("src", dataSrc);
        $(this).find('img').attr('data-src',src);
    });
    $(this).fadeIn(250);
});

希望它对你有帮助; - ）

jQuery：fadein和$（this）

3 个答案: