Jquery effects가 실행되기 전에 이전에 끝날 때까지 기다림

Question

세 번째 이벤트가 실행되어 첫 번째 라인이 끝난 다음 세 번째 라인이 시작된 후 두 번째 라인이 시작됩니다. 그러면 다음 요소 (효과)는 이전 효과가 끝날 때까지 기다려야합니까?

감사

ORIGINAL CODE :

$('.login_menu_arrow.top').click(function(event) 
{ 
    $("#login_menu").slideUp(); 
    $('.login_menu_arrow.top').hide(); 
    $('.login_menu_arrow.bottom').show(); 
    event.stopPropagation(); 
}); 

작동하지 않습니다

내 시험 :

출처 : A way to chain a sequence of events in JQuery?

1 :

을3210

$('.login_menu_arrow.top').click(function(event) 
{ 
    $("#login_menu").slideUp(function() { 
     $('.login_menu_arrow.top').hide(function() { 
      $('.login_menu_arrow.bottom').show(); 
     }); 
    }); 
}); 

출처 : How do you get JQuery to wait until an effect is finished?

2 : 당신이 그것으로 콜백을 사용하지 않도록

$('.login_menu_arrow.top').click(function(event) 
{ 
    $(this).queue(function() { 
     $("#login_menu").slideUp(); 
     $(this).dequeue(); 
    }).queue(function() { 
     $('.login_menu_arrow.top').hide(); 
     $(this).dequeue(); 
    }).queue(function() { 
     $('.login_menu_arrow.bottom').show(); 
     $(this).dequeue(); 
    }); 
}); 

Answer 1

당신은, 애니메이션 효과 unless you call it with a duration 1 만 hide와 가깝지했다

:

$('.login_menu_arrow.top').click(function(event) 
{ 
    $("#login_menu").slideUp(function() { 
     $('.login_menu_arrow.top').hide(); 
     $('.login_menu_arrow.bottom').show(); 
    }); 
}); 

단일 요소 (#login_menu). 여러 요소에 애니메이션을 적용하는 경우 콜백에 대한 호출이 여러 번 발생합니다 (완료된 요소 당 하나의 호출). 여러 요소에 애니메이션을 적용하고 모두 완료되었을 때 단일 콜백을 원한다면 as shown in this example을 시작한 후에 promise을 사용합니다. 그러나 단일 요소에 애니메이션을 적용하기 때문에이를 수행 할 필요가 없습니다.

$('.login_menu_arrow.top').click(function(event) 
{ 
    $("#login_menu").slideUp(function() { 
     $('.login_menu_arrow.top').hide(400,function() { 
      $('.login_menu_arrow.bottom').show(); 
     }); 
    }); 
}); 

을 또는 당신은 fadeOut() 방법을 사용할 수 있습니다 hide() 방법

Answer 2

설정 기간은 애니메이션을합니다.