Mastering jQuery Animation Techniques
animate() Method
Animates CSS properties of selected elements.
$("#animated").animate({
left: '250px',
opacity: '0.5',
height: '150px',
width: '150px'
}, 2000);setTimeout() Method
Executes a function once after a specified time interval.
setTimeout(function(){
alert("setTimeout function executed after 3 seconds.");
}, 3000);setInterval() Method
Executes a function repeatedly at specified intervals.
var intervalId = setInterval(function(){
var date = new Date();
$("#intervalOutput").text("Current time: " + date.toLocaleTimeString());
}, 1000);All in one Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery Animation</title>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
$(document).ready(function(){
$(".btn1").click(function(){
//Single step
$(".box1").animate({
left:"500px",
top:"0px",
width:"100px",
height:"100px",
},1000);
});
$(".btn2").click(function(){
//Multiple steps
var x = $(".box1");
x.animate({
left:"500px",
top:"0px",
width:"100px",
height:"100px",
},1000);
x.animate({
left:"500px",
top:"300px",
width:"200px",
height:"200px",
},500);
x.animate({
left:"0px",
top:"300px",
width:"100px",
height:"100px",
},2000);
x.animate({
left:"0px",
top:"0px",
width:"200px",
height:"200px",
},1000);
});
$(".btn3").click(function(){
setTimeout(function(){ // animation delay
$(".box1").animate({
left:"500px",
top:"0px",
width:"100px",
height:"100px",
},1000);
},3000);
});
$(".btn4").click(function(){
setInterval(function(){ //infinite or loop
var x = $(".box1");
x.animate({
left:"500px",
top:"0px",
width:"100px",
height:"100px",
},1000);
x.animate({
left:"0px",
top:"0px",
width:"200px",
height:"200px",
},1000);
},2000);
});
});
</script>
</head>
<body>
<style>
.box1{
background-color: aquamarine;
height: 200px;
width: 200px;
position: absolute;
left:0px;
top:0px;
margin-top: 50px;
}
</style>
<div class="box1"></div>
<button class="btn1">Animate1</button>
<button class="btn2">Animate2</button>
<button class="btn3">Animate3</button>
<button class="btn4">Animate4</button>
</body>
</html>