代码之家 › 专栏 › 技术社区 › Andrew

jquery:如何在一系列动画之后排队完成一个函数?

jquery javascript

Andrew · 技术社区 · 14 年前

我正在尝试设置一个向上滑动的表行的动画,然后添加一个新的表行,并设置新表行向下滑动的动画。我已经读过了 how to animate a table row ,现在我正试图将这些动画排队。

<table>
    <tr>
        <td><div><a class="trigger" "href="#">Hide this row and add a row after this one</a></div></td>
        <td><div>content</div></td>
        <td><div>content</div></td>
    </tr>
    <!-- new table row will be added here -->
    <tr class="another-row">
        <td><div>content</div></td>
        <td><div>content</div></td>
        <td><div>content</div></td>
    </tr>
    <tr id="new-row" style="display:none">
        <td><div>this row will appear after the row that was clicked</div></td>
        <td><div>content</div></td>
        <td><div>content</div></td>
    </tr>
</table>

以下是我的javascript:

$('.trigger').click(function(){

    var $clickedTableRow = $(this).closest('tr');
    var $newTableRow = $('#new-row');

    $clickedTableRow.find('td > div').slideUp('slow', function(){
        alert('animation complete, ready to hide table row');
        $clickedTableRow.hide();
        //however, this executes after each div has finished sliding up, instead of after the last one has finished
    });

});

当我打电话给 slideUp() 函数,看起来好像每个DIV同时向上滑动,但在每个DIV之后调用完整函数,而不是在所有这些DIV完成之后调用一次。我怎么排队 $clickedTableRow.hide(); 只有在所有的划分完成后才能执行函数?然后一旦 $clickedTableRow 已隐藏,我要将滑下新表行的动画排队:

$newTableRow
    .insertAfter($clickedTableRow)
    .show()
    .find('td > div')
    .slideDown(panelSpeed);

如何将这些多个操作排队?

3 回复 | 直到 14 年前

user113716 14 年前

一种可能是设置一个标志,用于检查排队的代码是否已运行。

下面是一个简单的例子: http://jsfiddle.net/4J4TY/

像这样:

$('.trigger').click(function(){

    var hasRun = false; // determine if queued code has run yet

    var $clickedTableRow = $(this).closest('tr');
    var $newTableRow = $('#new-row');

    $clickedTableRow.find('td > div').slideUp('slow', function(){
        if( !hasRun ) {
            hasRun = true;
            alert('animation complete, ready to hide table row');
            $clickedTableRow.hide();
        }
    });

});

现在标志设置为 true 它第一次运行时, if() 只执行一次。

fehays 14 年前

下面是一个如何检查动画是否已完成的示例:

http://www.gmarwaha.com/blog/2009/06/09/jquery-waiting-for-multiple-animations-to-complete/

我不确定这是否是最有效的解决方案,但它确实有效。我似乎找不到一个内置的jquery实用程序来检查所有动画是否完整。

James Westgate 14 年前

有一个名为的参数 'queue: true/false' 在选项中。使用此项对动画进行排队。如果调用stop方法,将创建一个新队列,它们将再次一起运行。

编辑:对不起,我解释得不太好。您希望使隐藏部分成为动画队列,因此不要将其放入完整队列中,将其添加到队列=真的动画队列中。