Use the jQuery delay() method
You can use the jQuery delay() method to call a function after waiting for some time. Simply pass an integer value to this function to set the time interval for the delay in milliseconds.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Execute a Function after Certain Time</title>
<style>
img{
display: none;
}
</style>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
function showImage(){
$("img").fadeIn(500);
}
$(document).ready(function(){
$(".show-image").click(function(){
$(this).text('loading...').delay(1000).queue(function() {
$(this).hide();
showImage(); //calling showimage() function
$(this).dequeue();
});
});
});
</script>
</head>
<body>
<button type="button" class="show-image">Show Image</button>
<img src="../images/kites.jpg" alt="Flying Kites">
</body>
</html>
You can use the jQuery delay() method to call a function after waiting for some time. Simply pass an integer value to this function to set the time interval for the delay in milliseconds.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Execute a Function after Certain Time</title>
<style>
img{
display: none;
}
</style>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
function showImage(){
$("img").fadeIn(500);
}
$(document).ready(function(){
$(".show-image").click(function(){
$(this).text('loading...').delay(1000).queue(function() {
$(this).hide();
showImage(); //calling showimage() function
$(this).dequeue();
});
});
});
</script>
</head>
<body>
<button type="button" class="show-image">Show Image</button>
<img src="../images/kites.jpg" alt="Flying Kites">
</body>
</html>
No comments:
Post a Comment