jQuery에서 시간 제한 설정이 작동하지 않습니다.

Question

아래에 jQuery 함수가 있습니다. 이 함수에서 내가 원하는 것은 .fadeToggle이 선택된 div가 포드 확장 클래스를 자체에 적용하기 전에 원치 않는 요소를 제거하는 것입니다. 어떤 이유에서든 toggleClass 주위에 포장 된 setTimeout 함수를 추가 할 때마다 podexpanded toggleClass 확장 부분이 작동하지 않습니다. setTimout없이 함수를 잘 작동하지만 첫 번째 부분이 완료 될 때까지 코드의 두 번째 부분을 지연해야합니다. 당신이 fadeToggle의 애니메이션이 완료된 후에 실행하는 기능을 제공하는

jQuery(document).on('click', '.portfoliopod', function(){ 





jQuery('.portfoliopod').not(jQuery(this)).fadeToggle(500); 


setTimeout(function() { 
jQuery(this).toggleClass('podexpanded'); 
    }, 600); 



jQuery(this).toggleClass("portfolioimagezoom"); 


    jQuery(this).children(".portfoliopodmessage").toggleClass('hidepod'); 


setTimeout(function() { 
    jQuery(".portfolioimage").toggleClass('portfolioimagelarge'); 

}, 400); 
}); 

Answer 1

어떤의 setTimeout 호출하기 전에 추가

var th = jQuery(this); 

을 다음과 같이 타임 아웃 기능 우리 차 대신에 jQuery를 (이) 지역 :

th.toggleClass('podexpanded'); 

Answer 2

fadeToggle의 세 번째 인수가 있습니다 :

여기 내 코드입니다.

jQuery(document).on('click', '.portfoliopod', function() 
{ 

    jQuery('.portfoliopod').not(jQuery(this)).fadeToggle(500, 'swing', function() 
    { 
     $(this).toggleClass('podexpanded'); 
    }); 
}); 

$(document).ready(function() 
 
{ 
 

 
    $("#test").hide(); 
 
    
 
    $("#test").fadeToggle(500, 'swing', function() 
 
    { 
 
    $(this).addClass('a_new_class').html('Update to this text after fadein in original div.'); 
 
    }); 
 
    
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="test">My text</div>