jQuery 호버 이미지 변경 애니메이션

Question

IMG 태그에 회색 음영 이미지가 있습니다. 마우스를 올리면 "src"를 컬러 이미지로 변경하고 마우스 아웃시 회색 음영으로 되돌리려면 Hover() 이벤트를 연결했습니다.

이것은 제대로 작동하지만 변경이 갑작 스럽습니다. 효과에 약간의 fadeIn()을 추가하여 색상이 페이드 인 및 페이드 아웃으로 표시되도록하고 싶습니다. 나는 일할 것이라고 생각했지만 다음과 같이 썼다. (이미지는 바뀌지 만 효과가 사라지거나 지연되지 않습니다.) 내가 도대체 ​​뭘 잘못하고있는 겁니까?

  $("#showForm").hover(
       function() { 
       $(this).fadeIn('slow', function(){ 
        $(this).attr("src", 'images/AddButtonSmall.gif'); 
       }); 
       }, 
       function() { 
       $(this).fadeIn('slow', function(){ 
        $(this).attr("src", 'images/AddButtonSmallGray.gif'); 
       }); 
       } 
      ); 

Answer 1

다음

두 솔루션은의이

$("#showForm").hover(
      function() { 
       $(this).fadeOut('fast',function(){ 
       $(this).attr("src", 'images/AddButtonSmall.gif'); 
       $("#img_src").html("images/AddButtonSmall.gif"); 
       }); 
      $(this).fadeIn('fast'); 
      }, 
      function() { 
      $(this).fadeOut('fast',function(){ 
       $(this).attr("src", 'images/AddButtonSmallGray.gif'); 
       $("#img_src").html("images/AddButtonSmallGray.gif"); 
       }); 
      $(this).fadeIn('fast'); 
      } 
     );​ 

으로 봅니다. 이미지를 즉시 변경하는 소스를 설정하기 때문에 코드가 작동하지 않습니다.두 이미지를 모두로드하고 CSS로 오버레이 한 다음 상위 컨테이너를 마우스로 가져 왔을 때 색상 1을 페이드 아웃하는 것이 더 쉽습니다. 또는 당신은 교차 할 수 마우스 오버에

http://jsfiddle.net/Xm2Be/3/

$('.fader').hover(function() { 
    $(this).find("img:last").fadeToggle(); 
});​ 

크로스 유행에서 해당

CSS

.fader { display: inline-block; } 
.fader img:last-child { 
    position: absolute; 
    top: 0; 
    left: 0; 
    display: none; 
}​ 

HTML

<div class="fader"> 
    <img src="http://placehold.it/300x300/000fff" /> 
    <img src="http://placehold.it/300x300/fff000" /> 
</div>​ 

페이드 인 페이드 전자

http://jsfiddle.net/Xm2Be/2/

$('.fader').hover(function() { 
    $(this).find("img").fadeToggle(); 
});​ 

Answer 2

$(this).fadeIn('slow', 

실제로이 요소에 페이드하려고, 천천히, 그리고 '이'는 현재 그레이 스케일을 통해 직접 컬러 이미지를 넣을 수 원하는 대신하는 경우

$("#showForm") 

을 말한다 이미지를 표시하고 숨겨진 컬러 이미지를 표시 한 다음 천천히 페이드 인합니다. 서로의 위에 위치한다고 가정하면 다음을 수행 할 수 있습니다.

); HTML을 가정

은 같은 것입니다 (sameAbsolutePosition는 어쩌면 똑같은 자리에 넣어하기 위해 CSS를, 어떤 위치에 같은입니다 : 절대; 왼쪽 : 20, 최고 : 20 픽셀) :에

<img src='images/AddButtonSmallGray.gif' class="sameAbsolutePosition"> 
<img src='images/AddButtonSmall.gif' style="display:none;" class="sameAbsolutePosition"> 

다시 말하면 다른 이미지 위에 새 이미지가 희미해질 것입니다. 그레이 스케일 이미지를 동시에 사라지게 할 수도 있습니다.

Answer 3

어디에서 페이드 아웃합니까? 페이드 100 번 0

로 변경 불투명도 0 밖으로 (100) 페이드로 변경 불투명도 display:block 않습니다 display:none을한다, 당신 fadeIn, 당신이 애니메이션을보고 해달라고, 이미지 display:block과 불투명도 그래서 100입니다 . 그래서 fadeIn 전에 display : none 또는 fadeOut을 다시 수행하십시오.

사례에 대한 설명이 나와 있습니다. 요구 사항에 따라 변경해야합니다.

$("#showForm").hover(
       function() { 
       $(this).fadeOut('fast').fadeIn('slow', function(){ 
        $(this).attr("src", 'images/AddButtonSmall.gif'); 
       }); 
       }, 
       function() { 
       $(this).fadeOut('fast').fadeIn('slow', function(){ 
        $(this).attr("src", 'images/AddButtonSmallGray.gif'); 
       }); 
       } 
      ); 

Answer 4

훨씬 더 나은 솔루션 :

이 작업을 수행하는 자바 스크립트 잊어 버려요. 대신 CSS의 sprites을 사용하십시오. fadeIn, fadeOut을 가지고 있다고 주장한다면, 전환을 사용하십시오.

업데이트 : 토드의 스프라이트에서 크기와 위치를 예측할 수있는 방법이 없기 때문에 아래의 주석에 응답하여 코드를 작성할 수 없습니다. 또한 IE8과 IE9에서 작동해야한다고 가정하기 때문에 내 제안은 스프라이트를 사용하고 전환을 사용하여 "기능"을 향상시키는 것뿐만 아니라 전환을 강조하는 것임을 분명히하고자합니다.

Answer 5

여기 Fiddle

Answer 6

너무 전환을 사용하여 CSS3와 함께이 크로스 페이드를 할 수 있습니다. 모든 브라우저에서 사용할 수 하지 않습니다하지만 여전히 ... 유사한 방법으로 http://www.w3schools.com/css3/css3_transitions.asp

예를 들어 CSS: image link, change on hover

에 :

#showForm 
{ 
    background: transparent url('images/AddButtonSmallGray.gif') center top no-repeat; 

    -webkit-transition:all 0.3s ease-in-out; 
    -moz-transition:all 0.3s ease-in-out; 
    transition:all 0.3s ease-in-out; 
} 

#showForm:hover { 
    background-image: url('images/AddButtonSmall.gif'); 
}