jQuery ожидая до одной анимации закончился до запуска другого
У меня есть ряд вкладок, которые вызывают определенные ОТДЕЛЕНИЯ с опциями 'вылететь' поверх родительского DIV. Содержание вытягивают на пути Ajax.
Как муха outs называют по щелчку так
$('.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;
});
У меня есть функция для закрытия flyouts:
function closeFlyout() {
$('.fly_container').animate({
'right': '-332'
}, 'fast', 'swing', function() {
$(this).detach();
});
};
Который называют, когда другой вылетает, вкладка нажата и также при нажатии близкой кнопки, содержавшей в мухе самой:
$('.fly_container .close').live('click', function() {
closeFlyout();
return false;
});
Я хотел бы расширить это так, чтобы, если муха открыта и пользователь нажал для инициализации другого flyout, то открытый flyout анимирует закрытый, но новая муха ожидает этой анимации для окончания прежде, чем показать новую муху.
2 ответа
Как насчет глобальной переменной, которая сигнализирует об открытии всплывающего окна? Затем используйте таймер, чтобы вызвать событие щелчка, пока анимация не завершится.
//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
}