고유 한 호버 이미지가있는 링크가 페이드 인/아웃

Question

각 링크 위로 마우스를 올리면 다른 이미지를 표시하는 메뉴를 만들려고합니다. 지금까지이 작업을 수행했지만 이미지가 점점 희미 해지기를 바랍니다.

이것은 내가 지금까지 얻은 것입니다. var $ preview = $ ("# groupImg"); 당신은 CSS3으로 시도 할 수

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

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

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