Jquery 함수 실행 사이의 지연

Question

내 페이지에는 두 개의 버튼, #signin and #signup가 있습니다. 클릭 기능은 아래 코드와 같습니다. 문제는 계속해서 클릭 할 때 함수의 실행 사이에 큰 지연이 나타나는 것입니다. 동시에 그들을 실행할 수 있습니까?

var counter = 0,signin = $("#signin"), signup = $("#signup"), signin_f = $("#signin_form"), holder = $("#holder"), signup_f = $("#signup_form"), f_container = $("#form_container"); 
$(".button").click(function() { 
     if (counter === 0) { 
      signin.removeClass('default_radius').addClass('right_radius'); 
      signup.removeClass('default_radius').addClass('left_radius'); 
      $("#first").animate({ 
       marginTop: "-=150px", 
      }, 500); 
     } 

    }); 

    $("#signup").click(function() { 
     if (counter === 0) { 
      holder.addClass('red_border').height(275).slideDown("slow"); 
      f_container.show(); 
      signup_f.fadeIn(1200); 
     } else { 
      holder.animate({height:"275"},1000).switchClass("green_border", "red_border", 1000); 
      signin_f.fadeOut(500);  
      f_container.animate({height:"260"},1000); 
      signup_f.fadeIn(1000); 
     } 
     counter++; 
    }); 

    $("#signin").click(function() { 
     if (counter === 0) { 
      holder.addClass('green_border').height(125).slideDown("slow"); 
      f_container.show(); 
      signin_f.fadeIn(1200); 
     } else { 
      holder.animate({height:"125"},1000).switchClass("red_border", "green_border", 500); 
      signup_f.fadeOut(500);       
      f_container.animate({height:"110"},1000);   
      signin_f.fadeIn(1200); 

     } 

     counter++; 
    }); 

코드의 작동 방식은 http://tural.no-ip.org입니다. 버튼을 빠르고 지속적으로 클릭하면 내가 말하는 것을 볼 수 있습니다. 외부 js 파일 : first.js.

Answer 1

다른 fade 기능을 추가하기 전에 .stop() 방법을 사용하십시오. 사용법 :

signin_f.stop(true, true).fadeIn(1200); 
//First argument true = Remove queued animations as well 
//Second argument true = Immediately finish the current animation