如何在动画完成后删除元素？
Posted
技术标签:
【中文标题】如何在动画完成后删除元素？【英文标题】：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>
动画完成后，我想将其删除。我该怎么做？
【问题讨论】：
【参考方案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。
【讨论】：
以上是关于如何在动画完成后删除元素？的主要内容，如果未能解决你的问题，请参考以下文章