如何在动画完成后删除元素？答案

【问题标题】：How to remove an element AFTER animation completes?如何在动画完成后删除元素？
【发布时间】：2010-11-28 18:53:23
【问题描述】：

我正在使用以下代码为 div 设置动画。

<script>
  $(function() {
    $("a.shift").click(function() {
      $("#introOverlay").animate({
        height: 0,
      }, 2000)
    });
  });
</script>

动画完成后，我想将其删除。我该怎么做？

【问题讨论】：

标签： jquery jquery-animate

【解决方案1】：

animate 需要另外 2 个参数，所以你可以这样做：

$("a.shift")
    .click(function() 
        {
            $("#introOverlay")
                .animate({height: 0}, 2000,"linear",function()
                    {
                        $(this).remove();
                    }
                )
        }
    );

未经测试。

编辑：经过测试：这是我使用的完整页面，扩展为 300 像素，使删除更加明显：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
        <script type="text/javascript">
            //<![CDATA[
            $(document).ready(function()
            {
                $(".shift").click(function() 
                {
                    $("#introOverlay")
                    .animate({height: 300}, 2000,"linear",function()
                    {
                        $(this).remove();
                    })
                });
            });
            //]]>
        </script>
    </head>
    <body>
    <a class="shift" href="javascript:void(0)">clickme</a>
    <div id="introOverlay" style="background-color:red;height:200px;">overlay</div>
    </body>
</html>

【讨论】：

嗨 Spender，动画完成后不会删除元素。

【解决方案2】：

JQuery animate(params, [duration], [easing], [callback] ) 提供了添加每次动画完成时调用的回调的可能性

回调（可选）功能：A 每当动画完成，执行一次每个元素都有动画效果。

语法非常简单：

<script>
$(function() {
    $("a.shift").click(function() {
        $("#introOverlay").animate({
        height: 0,
        }, 2000, "linear",
            function() {
                $("#introOverlay").hide();
            }
        )
        });

    })
</script>

另见SO question

【讨论】：

谢谢达夫，你能给我一些示例代码吗？这是我不明白的语法。
查看我链接的问题，那里有一个代码示例（也复制到这里）。基本上你只需将回调函数作为参数传递。

【解决方案3】：

将remove() 调用放入效果队列中，如下所示：

$("a.shift").click(function() {
  $("#introOverlay").animate({
    height: 0,
  }, 2000);
  $("#introOverlay").queue(function() {
    $(this).remove();
    $(this).dequeue();
  });
});

【讨论】：

我正在寻找一种方法来更新队列中的文本。这句话非常适合将 .text("") 之类的非队列调用放入队列。

【解决方案4】：

使用与动画所用时间相同的 window.timeout。

【讨论】：