slideToggle이 완료 될 때까지 요소 표시를 지연하는 방법은 무엇입니까?

Question

이것은 내 코드입니다.

$(".big").click(function() { 
    var widget = $(this).parent(); 
    widget.children('.layer-dark').slideToggle(300).fadeTo(1, 0.97); 
    widget.children('.loading, .hm_sm_btn').show(); 
}); 

지금 내가 어떻게 .loading 및 .hm_sm_btn show()이 slideToggle이 완료 이전 작업 이후에 끝낼 수 있습니다. 지금 당장 항목이 즉시 표시되므로 간단한 지연을 만들고 slideToggle()이 완료된 후 표시되도록 간단하고 쉬운 방법을 찾고 있습니다.

희망 제 질문은 분명합니다. 감사합니다.

Answer 1

widget.children('.layer-dark').slideToggle(300, function() { 
    widget.children('.loading, .hm_sm_btn').show(); 
}).fadeTo(1, 0.97); 

를 사용하여 콜백.

.slideToggle 문서에서는 slideToggle 동작이 끝날 때 추가 계산을 위해 콜백을 전달할 수 있음을 분명히 보여줍니다.

문서를 읽는 데 더 많은 시간을 할애해야합니다. 좋아.

Answer 2

당신은 (documentation 참조) slideToggle 기능에 대한 콜백 함수를 추가 할 수 있습니다 :

$(".big").click(function() { 
    var widget = $(this).parent(); 
    widget.children('.layer-dark') 
      .slideToggle(300, function() { widget.children('.loading, .hm_sm_btn').show() }) 
      .fadeTo(1, 0.97); 
}); 

Answer 3

어쩌면 콜백 방식으로 시도 할 수 있습니다.

$(".big").click(function() { var widget = $(this).parent(); widget.children('.layer-dark').slideToggle(300, function(){ widget.children('.loading, .hm_sm_btn').show(); }).fadeTo(1, 0.97); });