I have this animation where a box moves from one part of the page to another with the click of a start button.
How would I get the box to disappear from the page after the animation is completed?
$(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>You can run this right now, just add the complete event and it worked. Also read about .animate
edited: Update Jquery to version 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>Consider the following.
$(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>With .animate(), you can pass in an anonymous function to use once the animation is complete. I opted to use .fadeOut() to Hide the element. There are many ways to do this.
Please see: