Used for creating custom animations by gradually changing CSS properties. We use animate() method to create animations using jquery.
EDUCATION
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery Animate Example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
div {
width: 100px;
height: 100px;
background-color: blue;
margin: 20px;
color: white;
text-align: center;
line-height: 100px;
cursor: pointer;
}
</style>
</head>
<body>
<div id="animatedBox">Click me</div>
<script>
$(document).ready(function(){
// Animate the box on click
$("#animatedBox").click(function(){
$(this).animate({
width: '200px',
height: '200px',
marginLeft: '50px',
opacity: 0.5
}, 1000, function(){
// Animation complete
alert("Animation complete!");
});
});
});
</script>
</body>
</html>
The animation start ones the id #animatedBox is clicked.
We can use multiple css properties in the aniamte method.
We can keep time to complete a animation, Here we kept 1000 milliseconds (1 second) to cimplete the animation.
Using Effects means we can use the buit-in jquery effect methods like toggle, hide,show in animate() method.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery Animate Example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
div {
width: 100px;
height: 100px;
background-color: blue;
margin: 20px;
color: white;
text-align: center;
line-height: 100px;
cursor: pointer;
}
</style>
</head>
<body>
<div id="animatedBox">Click me</div>
<script>
$(document).ready(function(){
// Animate the box on click
$("#animatedBox").click(function(){
$(this).animate({
width: 'hide',
height: '200px',
marginLeft: '20px',
opacity: 0.5
}, 1000, function(){
// Animation complete
alert("Animation complete!");
});
});
});
</script>
</body>
</html>
Here we used hide in the width so that it will slide suring the animation.
The Concepts and codes you leart practice in Compilers till you are confident of doing on your own. A Various methods of examples, concepts, codes availble in our websites. Don't know where to start Down some code examples are given for this page topic use the code and compiler.
