jQuery UI 슬라이더를 사용하여 이전에서 이후로 이미지를 변경하십시오 (다른 소스).

Question

슬라이더 슬라이드에서 IMG 소스를 변경하려고하는데 너무 빠르지는 않습니다. 나는 그렇게 빨리 무엇을 의미합니까? slide() 이벤트에서 IMG src 특성을 즉시 변경할 수는 있지만 이것은 추악한 문제이며 원하지 않습니다. before.jpg라는 기본 이미지에는 fadeOut, 그리고 after.jpg라는 이미지에는 fadeIn이 있습니다.이 이미지는 슬라이더가 끝날 때 표시되어야합니다. 이 코드 시도 :

$(document).ready(function(){ 
    $('#slider').slider({ 
     slide: function(event, ui) { 
     if(ui.value >= 50) { 
      $('#image-changer').fadeOut('slow'); 
      $('#image-changer').attr('src', 'images/after.jpg'); 
      $('#image-changer').fadeIn('slow'); 
     } 
     } 
    }); 
}); 

을하지만, 어떤 날이를 달성하는 데 도움이 될 수 있습니다 항상 ui.value가 50보다 큰 값을 가질 수 있기 때문에 때문에 이미지 fadeIn 한 번 한 번 작동하지 않는 이유는 무엇입니까?

Answer 1

jQuery 효과 메서드는 비동기 적으로 실행됩니다.

$('#image-changer').fadeOut('slow', 
    function() { 
    $('#image-changer').attr('src', 'images/after.jpg').fadeIn('slow'); 
    } 
); 

페이드 아웃에 의해 받아 들여 두 번째 매개 변수는 애니메이션이 완료 될 때 호출하는 기능입니다 : 그들은 같은 시간에 모든 실행을 할 수 있도록하는 "체인"이러한 호출이 필요합니다.