Javascript jQuery:fadein和$（这个）

我有这张桌子。里面有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>

但不幸的是，

$（这个）

似乎没有针对正确的元素

---

下面是我创建的一个JSFIDLE。在左侧，您可以看到一幅图像。鼠标悬停时src的更改有效，但鼠标悬停时不会返回原始src。

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

$(".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

（淡出的图像）

---

jsIDLE:

只需将旧源代码存储在变量中，并使用该变量在

mouseleave

上更新源代码。这意味着您不必额外查询DOM

（）

检查这个

---

希望对您有所帮助；-）

您不是在悬停时将原始src属性修改为新的属性吗？您计划如何恢复它？在mouseleave函数中，您将src设置为它自己，它已被mouseenter覆盖。@Satyajit请详细说明答案；）我选择相同的解决方案：）谢谢！最后一件事：我应该在哪里停车（）。为了避免鼠标多次进入/离开时的连续淡入/淡出？@多FigMeNeGeNo，我可能会使用<代码> FADETO <代码>：如果你真的想要的话，我会考虑挂起悬停事件。@多FueMeNeGeNo是正确的，这是使用渐变效果的问题之一。每次添加效果时，它都会进入jQuery处理的队列。您可以调用

stop（）

中止队列，但它仍然无法满足您的需要。我建议你再问一个问题，说明你想要什么。

$(".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);
    }
});

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

$(".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);
});