자바 스크립트 머 금고 이미지 마우스 오버 및 마우스 아웃 효과를 수행하는 가장 좋은 방법은 무엇입니까?

Question

jQuery가이를 수행하는 데 사용할 라이브러리라고 생각합니다. 마우스 오버시 이미지 소스를 전환 한 다음 다시 mouseout으로 전환하는 방법을 확실히 알아낼 수 있습니다. 그러나 이미지와 페이드로이 효과를 어떻게 얻을 수 있습니까?

jQuery Cycle 플러그인을 사용하여이 작업을 이미 완료하려했지만 실패했습니다. 아마이 일을하는 더 쉬운 방법이 있다고 생각합니다. 어떤 생각이라도 도움을 주시면 고맙겠습니다.

Answer 1

DIV에 이미지를 놓고 DIV의 배경을 첫 번째 이미지로 설정하십시오. DIV에 이미지 태그를 넣고 SRC가 두 번째 이미지를 가리 키도록합니다.

이제 IMG의 불투명도로 들여다 볼 수 있습니다. 아무 것도 바꾸지 않고도 배경 이미지가 노출됩니다.

사용 .opacity()

는 당신이 래퍼 DIV에 치수를 넣어 만들거나 다른 이미지의 불투명도 내부 제로로 도착하면이 사라질 것입니다.

<div class="wrapper"> 
    <img src="..." /> 
</div> 

Answer 2

CSS3는이 같은 일을 처리하기 위해 전환 속성의 무리를 추가하고, 그러나 순간 당신은 당신이 mouseenter 및 mouseleave과 결합 .animate 기능의 사용을 만들 수있는 jQuery를 사용하여 설정하는 경우.

예 :

$('img') 
    .mouseenter(function() { 
     $(this).stop(true,true).animate({ opacity: 0.5 }, 2000); 
    }); 
    .mouseleave(function() { 
     $(this).stop(true,true).animate({ opacity: 1 }, 2000); 
    }); 

.stop은 이전 애니메이션을 취소하고 사용자가 여러 번 요소를 통해 빠르게 마우스를한다면, 그것은 애니메이션이에 구축 할 수 없도록 마무리 할 것 긴 대기열.

Answer 3

이

$(function(){ 
    $("imageSelector).mouseover(function(){ 
     $(this).data("oldSrc", this.src).attr("src", "newSource").stop().fadeT0(500, 1); 
    }).mouseout(function(){ 
    $(this).attr("src", $(this).data("oldSrc")).stop().fadeTo(500, 0.5); 
    }); 
});