jquery 이미지 바꾸기에 fade 추가하기

Question

롤오버에서 jquery를 사용하여 이미지를 대체하는 nav을 생성합니다.

http://peps.ca/blog/easy-image-rollover-script-with-jquery/

기본적으로, 당신은 파일 이름에 접미사 (_O)를 추가하고 SRC를 롤오버 할 때, JQuery와가 (_O) .PNG으로 대체 : 여기에 내가 사용하고있는 코드입니다. 나는 롤오버가있을 때 페이드를 추가하고 싶습니다. 전환이 순간적이지 않고 오히려 빠르고 우아한 페이드가 있습니다. 어떤 아이디어?

Answer 1

$('#the_image).hover(function() { 
    $(this).fadeOut(function() { 
    $(this).attr('src', $(this).attr('src').replace(".png", "_o.png")).fadeIn(); 
    }); 
}, function { 
    $(this).fadeOut(function() { 
    $(this).attr('src', $(this).attr('src').replace("_o.png", ".png")).fadeIn(); 
    }); 
}); 

Answer 2

기본 이미지의 맨 위에 두 번째 (숨겨진) 요소를 겹쳐서 표시 할 수 있습니다. 그런 다음 롤오버가있는 부분을 페이드 아웃 할 수 있습니다.

Answer 3

대신에 새 이미지를 겹쳐서 페이드 인하해야합니다. 전환이 완료 될 때까지 기다리십시오. 요소를 가정

일 등 ...

$('.my_img').parent().append($('.my_img').clone().attr('src','my_img_o.jpg').fadeIn('slow')) 

절대적으로