하나의 애니메이션이 다른 애니메이션을 시작하기 전에 끝날 때까지 기다리는 jQuery

Question

나는 부모 DIV 맨 위에 '날아갈 수있는'옵션이있는 특정 DIV를 발생시키는 탭이 있습니다. 콘텐츠는 AJAX를 통해 가져옵니다. 클릭하면 또 다른 탭을 비행 할 때 호출되는

function closeFlyout() { 

    $('.fly_container').animate({ 
     'right': '-332' 
    }, 'fast', 'swing', function() { 
     $(this).detach(); 
    }); 

}; 

클릭하고 :

플라이 아웃

내가 플라이 아웃을 종료하는 기능을 가지고 있으므로

$('.fly_out').live('click', function() { 

    var $widget = $(this).closest('.widget'); 

    var $flyOutIndex = $(this).index('.fly_out'); 

    if ($flyOutIndex == 0) { 
     $flyOutURL = 'Content/HTMLSnippets/Flyouts/Priceassessment/product_order.htm'; 
    } else if ($flyOutIndex == 1) { 
     $flyOutURL = 'Content/HTMLSnippets/Flyouts/PriceHistory/price_history_comparisons.htm'; 
    } else if ($flyOutIndex == 2) { 
     $flyOutURL = 'Content/HTMLSnippets/Flyouts/PriceHistory/price_history_scenarios.htm'; 
    } else if ($flyOutIndex == 3) { 
     $flyOutURL = 'Content/HTMLSnippets/Flyouts/PriceHistory/price_history_analysis.htm'; 
    } 

    // Close any open flyouts 
    closeFlyout(); 

    $.ajax({ 
     type: 'GET', 
     url: DashboardApplicationRoot + $flyOutURL, 
     dataType: 'html', 
     cache: false, 
     success: function(data) { 

      $($widget).prepend(data); 

      $('.fly_container').animate({ 'right': '0' }, 'fast'); 

      $('.scroll').jScrollPane(); 

      $('.striped li:nth-child(even)').addClass('odd'); 
     } 
    }); 

    return false; 

}); 

처럼 클릭에 호출 플라이 자체에 포함 된 닫기 버튼 :

$('.fly_container .close').live('click', function() { 

    closeFlyout(); 

    return false; 

}); 

이 작업을 끝내면 플라이 아웃이 열려 있고 사용자가 다른 플라이 아웃을 초기화하기 위해 클릭하면 열린 플라이 아웃은 종료되지만 새 플라이 아웃은 새 플라이 아웃을 표시하기 전에이 애니메이션이 끝날 때까지 대기합니다.

Answer 1

플라이 아웃이 열린 경우 신호를 보내는 전역 변수는 어떻게됩니까? 그런 다음 애니메이션이 완료 될 때까지 타이머를 사용하여 click 이벤트를 호출하십시오.

//Global space 

var flyOutActive = false; 


//Close Function 

function closeFlyout() { 

    $('.fly_container').animate({ 
     'right': '-332' 
    }, 'fast', 'swing', function() { 
     $(this).detach(); 
//update active flag 
flyOutActive = false; 

    }); 

}; 


//Ajax call 

$('.fly_out').live('click', function() { 

if(flyOutActive) 
{ 
    //Recursive function call waits for animation to complete 
    setTimer($('.fly_out').click(),100) 

} 
else 
{ 
    var $widget = $(this).closest('.widget'); 

    var $flyOutIndex = $(this).index('.fly_out'); 

    if ($flyOutIndex == 0) { 
     $flyOutURL = 'Content/HTMLSnippets/Flyouts/Priceassessment/product_order.htm'; 
    } else if ($flyOutIndex == 1) { 
     $flyOutURL = 'Content/HTMLSnippets/Flyouts/PriceHistory/price_history_comparisons.htm'; 
    } else if ($flyOutIndex == 2) { 
     $flyOutURL = 'Content/HTMLSnippets/Flyouts/PriceHistory/price_history_scenarios.htm'; 
    } else if ($flyOutIndex == 3) { 
     $flyOutURL = 'Content/HTMLSnippets/Flyouts/PriceHistory/price_history_analysis.htm'; 
    } 

    // Close any open flyouts 
    closeFlyout(); 

    $.ajax({ 
     type: 'GET', 
     url: DashboardApplicationRoot + $flyOutURL, 
     dataType: 'html', 
     cache: false, 
     success: function(data) { 

      $($widget).prepend(data); 

      $('.fly_container').animate({ 'right': '0' }, 'fast'); 

      $('.scroll').jScrollPane(); 

      $('.striped li:nth-child(even)').addClass('odd'); 

      flyOutActive = true; 
     } 
    }); 

    return false; 
} 

}); 

Answer 2

방법은

if(.fly_out:animated) { 
    // do something if it's already animated 
} else { 
    //do the action if it's not animated 
} 

을 추가하는 경우에 대한