jquery image 페이드 인 및 페이드 아웃 동시에?

Question

jquery를 사용하여 이미지를 흑백으로 바꾸려고합니다. 두 가지 방법이 있습니다. ...

1. fadeOut 현재 이미지와 한 번 완료되면 fadeIn 새 이미지. (이것은 쉽고 나는 그것을 복제 할 수있다)
2. fadeOut 현재 이미지와 동시에 fadeIn 새로운 이미지 ... (내가 생각할 수있는 유일한 솔루션은 두 개의 이미지 태그가 첫 번째 페이딩 아웃 현재 이미지와 두 번째입니다 새로운 이미지에서 희미 해짐)

동일한 ...에 대한 더 나은 또는 다른 해결책이 있습니까?

Answer 1

요구 사항에 따라 다릅니다. 이미지의 크기가 다른 경우 (종횡비), 예, 유일한 해결책은 두 이미지를 서로 쌓아 올리면서 동시에 페이드 인/아웃하는 것입니다.

이미지의 크기가 동일하면 이전에 사용한 멋진 솔루션이 있습니다. CSS에서

<div><div></div></div> 

은 이미지의 너비/높이에 자신의 너비/높이를 설정하고 자바 스크립트에서 다음을 수행하십시오 : 당신은 두 개의 중첩 <div>의을

1. 은 내부 DIV의 배경 이미지 설정
2. 바깥 쪽 div의 배경 이미지를 두 번째 이미지로 설정합니다.
3. 내부 div를 페이드 아웃합니다 (두 이미지 사이에 아주 좋은 부드럽게 전환 효과가 나타납니다).
4. 는
5. 는
6. 페이드
7. 등 내부 DIV에서 네 번째 이미지를 외부 DIV의 배경 이미지를 설정 내측 DIV있는 세번째 이미지
8. 페이드 내부 DIV의 배경 이미지를 설정 ...

이 방법을 사용하면 한 요소 만 퇴색하기 때문에 (빠르기 때문에) 정말 좋은 효과를 얻을 수 있습니다. 원활한 경험을 위해 이미지를 사전로드하십시오.

Answer 2

두 이미지의 위치 속성이 모두 css이고 절대 위치가 동일해야합니다. 시도해보십시오.

$('#image1').fadeOut('slow'); 
$('#image2').fadeIn('slow'); 

Answer 3

나는 게으르다. 단지 jQuery Cycle Lite을 사용한다.

$("#lazy").cycle(); 

Answer 4

는 사용 Jquery.Cycle는 Jquery.cycle이

$('.slides').cycle({ 
    fx:  'scrollHorz', 
    speed: 400, 
    timeout: 0});