Question

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

这是我到目前为止所得到的： 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 马丁

Answer 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

Answer 2

您可以尝试使用CSS3：

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

或使用jQuery：

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

具有独特悬停图像的链接淡入/淡出

2 个答案: