jQuery simultaniously 일을하는 방법

Question

나는 좋은 방법으로 다음을하는 방법을 알아낼 수없는 것 같습니다.

이미지가 희미 해집니다. 이미지 원본을 변경하십시오. 그런 다음 다시 페이드하십시오.

하지만 문제는 fadeOut과 fadeIn이 동시에 있어야합니다. 물론 내가 지금하고있는 방식 (몇 줄 아래로 읽음)은 매우 주목할만한 fadeOut 동안 소스를 바꿀 것입니다.

$('#lightboxImage').fadeOut('slow'); 
$('#lightboxImage').attr('src', 'an imagesource'); 
$('#lightboxImage').fadeIn('fast'); 

나는 이것을 단지 실행합니다. 그것은 fadeOut 전에 이미지를 변경합니다.

내가 두 번째 두 번째 줄을 fadeOut 콜백 함수에 넣었을 때. 새 이미지가 희미 해지기 전에 작은 흰색 화면이 나타납니다.

누군가가이 문제를 해결할 수 있기를 바랍니다. :)

Answer 1

fadeOut 콜백 기능을 사용해야합니다. 아래

$('#lightboxImage').fadeOut('slow', function() { 
    // Callback function that will be called after fadeOut 
    $('#lightboxImage').attr('src', 'an imagesource').fadeIn('fast'); 
}); 

jQuery를 문서에서, 아래 참조

.fadeOut([duration] [, easing] [, callback])

• durationA 문자열이나 애니메이션이 실행 시간을 결정하는 숫자입니다.
• easingA 변환에 사용할 여유 함수를 나타내는 문자열.
• callback 애니메이션이 완료되면 호출 할 수있는 함수.

Answer 2

콜백 기능을 사용하십시오.

wikipedia page은 콜백 기능을 잘 설명합니다. 컴퓨터 프로그래밍

는 콜백은 다른 코드 인수로 전달하고, 실행 가능한 코드, 또는 실행 코드 부분에 대한 참조이다. 이렇게하면 하위 레벨 소프트웨어 계층이 상위 계층에 정의 된 서브 루틴 (또는 함수)을 호출 할 수 있습니다.

$('#lightboxImage').fadeOut('slow', function() { 
    $(this).attr('src', 'an imagesource').fadeIn('fast'); 
    }); 
}); 

사용 $ (이) 또 다시 발견하지 않는 : 그들이 트릭을 할 것입니다 큐

Answer 3

.

편집 : attr 함수에 콜백이 없으므로 내 대답이 업데이트되었습니다. 고마워.

Answer 4

사람들이 제공하는 답변이 원하는 것인지 잘 모르겠습니다.

첫 번째 이미지가 두 번째 이미지로 "흐리게"보이길 원합니다.

이 경우 두 이미지가 필요합니다.

뒤의 코드는 display: none이어야합니다.

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

을 그리고 첫 번째 이미지는 두 번째로 퇴색한다 :

그럼 당신은 할 수 있습니다.

전경이 퇴색하기 전의 배경 이미지를 포착하도록 두 이미지를 절대적으로 배치해야합니다.

http://jsfiddle.net/vre4M/

이 또한 돌아가서 전달할 수 있습니다 : http://jsfiddle.net/vre4M/1/