image1을 페이드 아웃하고 hover에서 image2를 페이드 아웃하려고 시도한 다음 롤아웃시이 전환을 되돌립니다. 아이디어?

Question

나는 logade.png를 hover로 바꾼 다음 다시 롤아웃 할 때 logomark.png를 사용하고 싶습니다.

호버에서는 logomark.png가 0 불투명으로 페이드 아웃되고 logotext.png는 0에서 1 불투명으로 페이드 아웃됩니다.

사용자가 이미지에서 마우스를 움직이면 뒤집습니다. logotext.png는 1에서 0으로 불투명 해지고 logomark.png는 0에서 1로 불투명 해집니다.

기본적으로 크로스 페이드입니다. 하지만이 이미지는 투명한 배경을 가지고 있기 때문에 둘 다 볼 수 있기 때문에 다른 이미지 위에 놓는 것처럼 간단하지 않습니다. 실제로는 항상 숨겨야합니다.

전환하는 동안 흐림 효과를 추가하는 것도 좋습니다. 0에서 1 불투명도로 갈 때, 이미지는 전체 불투명도로 페이드 인 할 때 흐리게 나타납니다. 그런 다음 불투명도 1에 흐림 효과가 없습니다.

마지막으로 전환의 타이밍을 조정할 수 있으면 좋을 것입니다.

도움이 될 것입니다.

고마워요

Answer 1

당신이 다음 매우 쉽게 jQuery를 사용하는 경우

지금까지이 일을 코드

$('.img').hover(function(){ 
$(this).fadeOut(function(){ 
$(this).attr("src","logotext.png"); 
$(this).fadeIn(); 
})}, 
function(){ 
$(this).fadeOut(function(){ 
$(this).attr("src","logomark.png"); 
$(this).fadeIn() 
})})