마우스 오버 및 마우스 아웃시 페이드 인 효과를 어떻게 추가합니까?

Question

마우스 오버 및 마우스 아웃시 페이드 아웃 효과를 추가하는 방법은 무엇입니까?

<script> 
jQuery(function() { 
jQuery(".logo img").mouseover(function() { 
var src = "<?php echo $this->baseurl ?>/templates/kalfany/images/logo-<?php echo $this->language; ?>-hover.png"; 
jQuery(this).attr("src", src); 
}).mouseout(function() { 
var src = "<?php echo $this->baseurl ?>/templates/kalfany/images/logo-<?php echo $this->language; ?>.png"; 
jQuery(this).attr("src", src); 
}); }); 
</script> 

그리고 난 여기

http://bavotasan.com/2009/creating-a-jquery-mouseover-fade-effect/

에서 내 질문의 답을 얻고 난 을 찾고 어떤이가 그래서, 최선의 대답은 내 꺼야)이 같은

Answer 1

사용 뭔가 .. .

$('.logo img').hover(
    function(){ 
    $(this).fadeOut('slow'); 
    }, 
    function(){ 
    $(this).fadeIn('slow'); 
    } 
); 

그러나 나는 생각했다. 일단 완전히 사라지면 호버가 스스로를 부르면 작동하지 않아. 이미지 위에 div를 추가하고 div 대신 이미지를 숨길 수 있습니다. 당신이 크로스 페이드의 어떤 종류를 찾고하지 않는 경우

Answer 2

당신은 다음과 같이 사용할 수 있습니다 ...

$(".logo img").mouseover(function() { 
    $(this).fadeIn('fast'); 
}).mouseout(function() { 
    $(this).fadeOut('fast'); 
});​ 

Answer 3

당신은

jQuery("img").mouseover(function() { 
    var src = "http://www.josephmccaffery.com/wp-content/uploads/2011/04/logo_google_x-150x150.png"; 
    jQuery(this).fadeOut(300,function(){ 
     jQuery(this).attr("src", src).fadeIn(); 
    }) 
}).mouseout(function() { 
    var src = "http://techteen.net/wp-content/uploads/2012/08/Google-Logo-Square.png"; 
    jQuery(this).fadeOut(300,function(){ 
     jQuery(this).attr("src", src).fadeIn(); 
    }) 
}); 

jsfddle

글리치를 사용할 수 있습니다 이미지가로드되지 않은 경우 나타날 수 있습니다.