[ Jquery - Start animation when another one has ended ]
I'm trying to start a second animation only when the first one is halfway running or when it has already finished.
Any help will be appreciated
Tried the .is(':animated') method but for some reason is not working.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>ResearchAnimation</title>
<style>
div {
background-color: #bca;
width: 20px;
border: 1px solid black;
}
</style>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<button id="medicalDevices">&raquo; Expand</button>
<div id="medicalDevicesBlock">M<br />
e<br />
d<br />
i<br />
c<br />
a<br />
l<br />
<br />
D<br />
e<br />
v<br />
i<br />
c<br />
e<br />
s<br /></div>
<div id="secondBlock" > H<br />
E<br />
L<br />
L<br />
O <br />
</div>
<!-- /////////////////////////////// Scripts ///////////////////////////////////////////// -->
<script>
$( "#medicalDevices" ).click(function() {
$( "#medicalDevicesBlock" ).animate({
width: "70%",
opacity: 60,
marginLeft: "0.6in",
fontSize: "3em",
borderWidth: "10px"
}, 1500 );
if ($('#medicalDevices').is(':animated')) {
// do something
$( "#secondBlock" ).animate({
width: "70%",
opacity: 60,
marginLeft: "0.6in",
fontSize: "3em",
borderWidth: "10px"
}, 1500 );
}
});
</script>
</body>
</html>
Answer 1
You can use callback here:
$("#medicalDevices").click(function () {
$("#medicalDevicesBlock").animate({
width: "70%",
opacity: 60,
marginLeft: "0.6in",
fontSize: "3em",
borderWidth: "10px"
}, 1500, function () {
$("#secondBlock").animate({
width: "70%",
opacity: 60,
marginLeft: "0.6in",
fontSize: "3em",
borderWidth: "10px"
}, 1500);
});
});
.animate() also support a complete callback function
.animate( properties [, duration ] [, easing ] [, complete ] )
which is fired once the animation is complete, so you can do:
$("#medicalDevices").click(function () {
$("#medicalDevicesBlock").animate({
width: "70%",
opacity: 60,
marginLeft: "0.6in",
fontSize: "3em",
borderWidth: "10px"
}, {
duration: 1500,
complete: function () {
$("#secondBlock").animate({
width: "70%",
opacity: 60,
marginLeft: "0.6in",
fontSize: "3em",
borderWidth: "10px"
}, 1500);
}
});
});
Answer 2
Use Callback and stop() the current animation and do the next one using jquery When .stop() is called on an element, the currently-running animation (if any) is immediately stopped
Use stop() or finish() method in jquery to stop the current animation .
$("#medicalDevices").click(function () {
$("#medicalDevicesBlock").stop().animate({
width: "70%",
opacity: 60,
marginLeft: "0.6in",
fontSize: "3em",
borderWidth: "10px"
}, 1500, function () {
$("#secondBlock").stop().animate({
width: "70%",
opacity: 60,
marginLeft: "0.6in",
fontSize: "3em",
borderWidth: "10px"
}, 1500);
});
});
Answer 3
You can also use promises which, as of jQuery 1.8, also work for animations:
$( "#medicalDevicesBlock" ).animate({
width: "70%",
opacity: 60,
marginLeft: "0.6in",
fontSize: "3em",
borderWidth: "10px"
}, 1500 ).promise().done(function() {
$("#secondBlock").animate({
width: "70%",
opacity: 60,
marginLeft: "0.6in",
fontSize: "3em",
borderWidth: "10px"
}, 1500);
});
Jquery reference: https://api.jquery.com/promise/
Logically, this works as follows. You obtain the promise object from the first item that is animating with .promise() and then register a .done() handler on the promise object. When that first animation finishes, it will resolve that promise and thus trigger the .done() handler to be called.
Promises are particularly useful for animations if you want to do something when several animations all complete which is much harder to do with completion functions, but easy to do with promises.
