jquery 롤오버 마우스 페이드 이미지

Question

누군가 이미지를 마우스로 가리키면 이미지를 대체하는 jquery 스크립트가 있습니다.

페이드와 함께 변경하고 싶습니다.

무엇을해야합니까?

감사합니다. (요소가 페이드 아웃 때 트리거되고하는 MouseLeave 문제를 방지 할 수 불투명도를 애니메이션)

<img src='images/dogySitter_s.png' alt='' id='first' /> 



<script type='text/javascript'> 
$(document).ready(function(){ 
    $("#first").hover(
     function() {$(this).attr("src","images/dogySitter_c.png");}, 
     function() {$(this).attr("src","images/dogySitter_s.png"); 
    }); 
}); 
</script> 

Answer 1

이 이미지를 교체, 밖으로 요소를 사라질 것이다, 그리고 다시 요소를 페이드 :

$(document).ready(function(){ 
    $("#first").on({ 
     mouseenter: function() { 
      $(this).animate({opacity: 0}, 400, function() { 
       $(this).attr('src', 'images/dogySitter_c.png') 
         .animate({opacity: 1}, 400); 
      }); 
     }, 
     mouseleave: function() { 
      $(this).animate({opacity: 0}, 400, function() { 
       $(this).attr('src', 'images/dogySitter_s.png') 
         .animate({opacity: 1}, 400); 
      }); 
     } 
    }); 
}); 

들어 크로스 페이딩하면 두 요소가 필요합니다

Answer 2

adeneo의 답변은 fadeIn 함수를 fadeOut 함수의 콜백으로 제공합니다. 이미지가 희미 해져서 다른 이미지가 희미 해지기를 원한다면 효과적입니다.

동시에 사라지기를 원하면 동시에 숨겨진 이미지를 배치 할 때 css 속임수를 사용해야 할 것입니다 비 숨겨진 이미지 위에 다음 fadeIn과 fadeOut를 호출하십시오. 모든 jQuery 애니메이션은 비동기 적으로 실행되므로 동시에 발생합니다.

더 많은 정보는 여기 http://api.jquery.com/fadeOut/