带有独特悬停图像的链接淡入/淡出答案

【问题标题】：links with unique hover image fade in/out带有独特悬停图像的链接淡入/淡出
【发布时间】：2013-12-14 18:55:49
【问题描述】：

我正在尝试制作一个菜单，当将鼠标悬停在每个链接上时会显示不同的图像。到目前为止，我已经做到了这一点，但我还希望图像淡入淡出。

这是我到目前为止所得到的： var $preview = $("#groupImg");

$(".link").hover(
  function() {
    $preview.attr("src", $(this).data("thumbnail-src"));
    $('#groupImg').css('opacity','1')
  },
  function() {
    $('#groupImg').css('opacity','0')
  }
);

http://jsfiddle.net/mcx2u/

谢谢:)

BR 马丁

【问题讨论】：

标签： jquery image hyperlink hover fade

【解决方案1】：

$(".link").on({
    mouseenter: function() {
        var self = this;
        $('#groupImg').fadeOut('fast', function() {
            $(this).prop('src', $(self).data("thumbnail-src")).fadeIn('fast');
        });
    },
    mouseleave: function() {
        $('#groupImg').fadeOut('fast');
    }
});

FIDDLE

【讨论】：

很好的答案，只是想知道为什么将其分配给自我？ var self = this;
@JamieRead - 因为回调中的this 不是同一个元素？

【解决方案2】：

你可以试试 CSS3：

#groupImg{ transition: opacity 1s ease} 
//plus all the mixins

或使用 jQuery：

$('#groupImg').animate({'opacity':'1'}, 1000);

【讨论】：