如何在jQuery动画完成后使HTML/CSS元素消失？
如何在jQuery动画完成后使HTML/CSS元素消失？
提问于 2022-03-29 03:55:02
我有这样的动画，其中一个方块从页面的一个部分移动到另一个部分，点击一个开始按钮。
在动画完成后，我将如何使该框从页面中消失？
$(function() {
$("button").click(function() {
$("#box").animate({
left: $(window).width() - 800
});
});
});#box {
width: 100px;
height: 200px;
background-color: skyblue;
position: absolute;
left: 0px;
top: 300px;
text-align: center;
font-family: Times New Roman;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="box">
<p> BOX </p>
</div>
<div id="box">
<p> Box </p>
</div>
<button>Start</button>
回答 2
Stack Overflow用户
发布于 2022-03-29 04:30:18
您现在可以运行这个程序，只需添加完整的事件就可以了。也读过关于.animate的文章
编辑:将Jquery更新为3.6.0版本
$(function() {
$("button").click(function() {
$("#box").animate({
left: $(window).width() - 800
},{
complete: function () { // complete call back
$("#box").hide(); // can hide or remove this elemenet
}
});
});
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div id="box">
<p> Box </p>
</div>
<style type='text/css'>
#box {
width: 100px;
height: 200px;
background-color: skyblue;
position: absolute;
left: 0px;
top: 50px;
text-align: center;
font-family: Times New Roman;
}
</style>
<button>Start</button>
Stack Overflow用户
发布于 2022-03-29 18:05:08
请考虑以下几点。
$(function() {
$("button").click(function() {
$("#box").animate({
left: $(window).width() - $("#box").width()
}, function() {
$("#box").fadeOut();
});
});
});#box {
width: 100px;
height: 200px;
background-color: skyblue;
position: absolute;
left: 0px;
top: 300px;
text-align: center;
font-family: Times New Roman;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div id="box">
<p>BOX</p>
</div>
<button>Start</button>
使用.animate()，您可以传入一个匿名函数，以便在动画完成后使用。我选择使用.fadeOut()隐藏元素。有很多方法可以做到这一点。
请参阅：
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/71656247
复制相关文章
相似问题
腾讯云开发者
