JQuery Animations

Library link to add

https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js

How to animate in JQuery?

$(document).ready(function(){
    $("button").click(function(){
        $("div").animate({left: '200px'});
    });
});

Try it

Move a div with jQuery

$(document).ready(function(){
    $("button").click(function(){
        $("div").animate({
            left: '270px',
            opacity: '0.5',
            height: '150px',
            width: '150px'
        });
    });
});

Try it

Animate using Pre-defined values with jQuery

$(document).ready(function(){
    $("button").click(function(){
        $("div").animate({
            height: 'toggle'
        });
    });
});

Try it

Animate by the use of Queue functionality with jQuery

$(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");
    });
});

Try it

Video Lecture