jQuery 여러 요소를 제거하고 fadeIn 요소를 제거하십시오.

Question

jquery로 기능 슬라이더를 만들고 있는데 id #가 다른 이미지를 # s2 이미지로 바꾸기 위해 클릭 한 경우를 원합니다. 이다)

나는

$(document).ready(function() { 
    $("#second").click(function(){ 
    $("#s1").remove(); 
    $("#s3").remove(); 
    $("#s4").remove(); 
    $("#s5").remove(); 
    $("#s2").fadeIn(); 
    }); 
}); 
$(document).ready(function() { 
     $("#first").click(function(){ 
     $("#s1").fadeIn(); 
     $("#s3").remove(); 
     $("#s4").remove(); 
     $("#s5").remove(); 
     $("#s2").remove(); 
     }); 
    }); 

을 시도했지만 작동하지만 난 #first 클릭하면 모든 이미지가 내가 이해하지만 난 항상 fadeIn()/페이드 아웃 (와 잊지 무엇인지 확실하지 않다

Answer 1

을 사라 그것들은 애니메이션이고 비동기 적으로 발생합니다.

그래서 $ ("# s1")에 대한 호출. fadeIn(); 다음과 같은 .remove() 호출이 동시에 발생합니다.

$("#s1").fadeIn('normal', function() { 
    $("#s3").remove(); 
    $("#s4").remove(); 
    $("#s5").remove(); 
    $("#s2").remove(); 
}); 

그 방법은, 제거 호출 모두가 fadeIn 때까지 일어나지 않을 것입니다() 완료 : 당신이해야 할 일은

는() 콜백 함수를 사용하는 전화가 fadeIn을 변경할 수 있습니다.

는

업데이트 : 귀하의 코멘트에서

,이 더 나은 해답이 될 수 있다고 생각 : 당신은 .remove()를 사용하지만 페이지 ... 다시 그들을 얻을 수있는 방법의 요소를 제거합니다. 당신이하고 싶은 것은 요소를 숨기기 위해서 .hide()를 사용하는 것입니다. 나중에 그들을 보여주기 위해 .fadeIn()을 호출 할 수 있습니다. 답변에 대한

$(document).ready(function() { 
    $("#second").click(function(){ 
     $("#s1").hide(); 
     $("#s3").hide(); 
     $("#s4").hide(); 
     $("#s5").hide(); 
     $("#s2").fadeIn(); 
    }); 

    $("#first").click(function(){ 
     $("#s3").hide(); 
     $("#s4").hide(); 
     $("#s5").hide(); 
     $("#s2").hide(); 
     $("#s1").fadeIn(); 
    }); 

});