이미지가 페이드 인/아웃

Question

메뉴 (img.b 및 img.a) 중첩에 2 개의 이미지 클래스가 있으며 img.b는 기본적으로 위에 놓여 있고 투명도는 0이고 img.a는 페이드 아웃해야합니다 다른 코드는 페이드인데 .. 코드와 마찬가지로 img.a는 페이드 인으로 남아 있습니다 (2 개의 클래스는 투명도를 가짐으로써 하나씩 볼 수 있습니다). 몇 가지 해결책을 시도했지만 모두 영향을 미쳤습니다. 함께 단추.

<script type='text/javascript'> 
$(document).ready(function(){ 
$("img.b").hover(
function() { 
$(this).stop().animate({"opacity": "1"}, "fast"); 
}, 
function() { 
$(this).stop().animate({"opacity": "0"}, "fast"); 
}); 
}); 
</script> 


img.a { 
    z-index: 1; 
    position:absolute; 
     } 

img.b { 
    position:absolute; 
    opacity: 0; 
    z-index:10; 
    } 

Answer 1

이것은 this previous question과 유사합니다. 당신이하려는 것은 크로스 페이딩이라고합니다. This article은 아주 잘 설명합니다.

crossfading with CSS에 관심이있을 수 있습니다.

실제 문제는 JavaScript에서 실제로 크로스 페이드를 수행하는 것이 단일 스레드이기 때문에 어렵다는 것입니다. 모든 '크로스 페이드 (cross fade)'플러그인 등은 상단 요소를 희미 해 지거나 백그라운드를 빠르게 깜박여 가짜입니다. 즉 fadeOut 하나의 이미지를 500ms로 반 밀리 초 동안 배경을 보여 주면 곧바로 500ms가 넘는 새 이미지가 사라집니다.

투명도가있는 두 개의 이미지가있는 경우 멋진 크로스 페이드를 수행하는 것은 가짜 - 크로스 - 페이드 - 배경 기술을 사용하지 않으면 매우 어려워 질 것입니다.

일부 canvas and requestAnimationFrame을 사용하여 실제 크로스 페이드를 얻을 수도 있지만 간단한 jQuery fadeIn/fadeOut 호출보다 훨씬 복잡해지고 있습니다.