jQuery等到一个动画完成之后才开始另一个动画
问题描述:
我有一组选项卡,这些选项卡会导致某些DIV选项在父DIV顶部“飞出”。内容通过AJAX提取。jQuery等到一个动画完成之后才开始另一个动画
苍蝇超时被称为上点击像这样
$('.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;
});
我想分机结束这个动作,以便如果飞出来并且用户点击以初始化另一个飞出,则打开的飞出动画关闭,但新的飞出等待此动画完成,然后显示新的飞出。
答
如果展开弹出窗口,全局变量会发出什么信号?然后使用计时器调用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;
}
});
答
怎么样,如果你添加一个
if(.fly_out:animated) {
// do something if it's already animated
} else {
//do the action if it's not animated
}