Library link to add
https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js
How to animate in JQuery?
|
1 2 3 4 5 |
$(document).ready(function(){ $("button").click(function(){ $("div").animate({left: '200px'}); }); }); |
Move a div with jQuery
|
1 2 3 4 5 6 7 8 9 10 |
$(document).ready(function(){ $("button").click(function(){ $("div").animate({ left: '270px', opacity: '0.5', height: '150px', width: '150px' }); }); }); |
Animate using Pre-defined values with jQuery
|
1 2 3 4 5 6 7 |
$(document).ready(function(){ $("button").click(function(){ $("div").animate({ height: 'toggle' }); }); }); |
Animate by the use of Queue functionality with jQuery
|
1 2 3 4 5 6 7 8 9 |
$(document).ready(function(){ $("button").click(function(){ var div = $("div"); div.animate({height: '200px', opacity: '0.3'}, "slow"); div.animate({width: '200px', opacity: '0.7'}, "slow"); div.animate({height: '100px', opacity: '0.2'}, "slow"); div.animate({width: '100px', opacity: '0.6'}, "slow"); }); }); |
Video Lecture
