Session 10: How To Make Animation Using Jquery

hi ,
welcome again ,
today we are going to start session 10 , an interesting session based on making animation. anyone can make animation. there are different way of making animation ,from this here we are showing jquery animation.
let us see below example:

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

in above simple example if you click on button an div whose class abc showing height zero to original & if you click again it reverse.

now let us see more detail:
 

$('.button').click(function(){
    var div = $(".abc");
    div.animate({right: '330px'}, "slow");
    div.animate({font-size: '9pt'}, "slow");
});    

in above example div get animated to right with change font size.
note: above animation support in all browser
 * see be careful this example 

$(document).ready(function(){
 // Start animation
 $(".start-btn").click(function(){
 $("img").animate({left: "+=150px"}, 2000);
    });

    // Stop running animation

    $(".stop-btn").click(function(){

      $("img").stop();

    });

    // Start animation in the opposite direction

    $(".back-btn").click(function(){

      $("img").animate({left: "-=150px"}, 2000);

    });

    // Reset to default

    $(".reset-btn").click(function(){

      $("img").animate({left: "0"}, "fast");

    });

});

above example of image animation in which affect using three button reset, back , stop button

we will more detail & intresting example in next session.
thanks for viewing please share & comment. which will help to give more knowledge.