You can utilize the jQuery callback function mechanism to stop events from firing until an effect is completely finished, such as doing something after slide animation or fade out transition is fully completed and so on. Let's take a look at an example to see how it works:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Fire Events after an Effect is Over</title>
<style>
.box{
height: 300px;
display: none;
background: yellowgreen;
}
</style>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function(){
$(".box").slideDown(3000, function(){
$(".hint").text("Sliding is completed, now fading out.");
$(this).fadeOut(3000, function(){
$(".hint").text("Fading out completed.");
});
});
});
</script>
</head>
<body>
<div class="box"></div>
<p class="hint"></p>
</body>
</html>
Hi, My name is Harsukh Makwana. i have been work with many programming language like php, python, javascript, node, react, anguler, etc.. since last 5 year. if you have any issue or want me hire then contact me on [email protected]
How to check if variable is string in PHP
PHP is simple programming method by whic...Install Python 3.8 in Ubuntu
Python is flexible and powerful open-sou...Page Scroll Progress Bar with Web in React
Do you want to display a progress bar on...How to Crop Image before Upload using Cropper Js in Laravel 7.x
Hi Guys, In this tutorial,I will lear...How to Append Values to an Array in JavaScript
Use the push() Method You can simply...