jQuery等到一个动画完成之后才开始另一个动画

Question

我有一组选项卡，这些选项卡会导致某些DIV选项在父DIV顶部“飞出”。内容通过AJAX提取。

苍蝇超时被称为上点击像这样

$('.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; 

}); 

我有一个函数来关闭弹出按钮：点击时

function closeFlyout() { 

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

}; 

当另一个飞出标签被称为被点击，也一个关闭按钮包含在飞出本身：

$('.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 
}