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
}

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

2 个答案: