jQuery Animation Effects
The jQuery animate() method provides you a way to create custom animations. It is a wrapper method, meaning that it operates on a set of previously selected DOM elements , wrapped by jQuery. This method allows you to apply your own custom animation effects to the elements in the set. This method can be used in various ways, accepting unlimited parameters which specify what CSS properties should be affected, as well as duration and a callback function . Syntax
$(selector).animate({parameters},duration,callback);
- parameters: CSS properties to be animated.
- speed: Duration of the effect (optional).
- callback: function which is executed after the animation completes.
$("div").animate({right: '500px'});
<div style="padding: 25px;background: red;width:10%;position:absolute;">
jQuery Animation
</div>
Browser View
jQuery Animation
<html>
<head>
<title>jQuery Animation</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("button").click(function(){
$("div").animate({right: '500px'});
});
});
</script>
</head>
<body>
<div style="padding: 25px;background: red;width:10%;position:absolute;">
jQuery Animation
</div>
<br><br><br><br>
<button>Start Animation</button>
</body>
</html>
jQuery animate() using multiple properties
$("div").animate({
left: '300px',
opacity: '0.5'
});
<div style="padding: 25px;background: red;width:10%;position:absolute;">
jQuery Animation
</div>
Browser View
jQuery Animation
<html>
<head>
<title>jQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("button").click(function(){
$("div").animate({
left: '300px',
opacity: '0.5'
});
});
});
</script>
</head>
<body>
<div style="padding: 25px;background: red;width:10%;position:absolute;">
jQuery Animation
</div>
<br><br><br><br>
<button>Start Animation</button>
</body>
</html>
jQuery animate() using Relative Values
Browser View
jQuery Animation
<html>
<head>
<title>jQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("#bigger").click(function(){
$("div").animate({
height: '+=50px',
width: '+=50px'
});
});
$("#smaller").click(function(){
$("div").animate({
height: '-=50px',
width: '-=50px'
});
});
});
</script>
</head>
<body>
<div style="padding: 25px;background: red;width:10%;position:absolute;">
jQuery Animation
</div>
<br><br><br><br><br><br>
<button id="bigger">Bigger</button>
<button id="smaller">Smaller</button>
</body>
</html>
Related Topics