Animation

Jquery animation() are used to create custom animation on web page.

Syntax

$(selector).animate({params},speed,callback);
  • Here speed parameter is optional, speed parameter specifies the speed of the hiding/showing, and can take values: "slow", "fast", or milliseconds.
  • callback parameter is optional, callback parameter is a function to be executed after the hide() or show() method completes.

Example of animation in jQuery

<!DOCTYPE html>
<html>
<head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $("div").animate({left: '450px'});
    });
});
</script>
</head>
<body>

<button>Start Animation</button>

<div style="background:#3399FF;height:100px;width:106px;position:absolute;"></div>

</body>
</html>

Output

Note: you can format above code like you want, including line breaks. JQuery is not very strict on the syntax.

Syntax

<script>
$(document).ready(function(){
    $("button").click(function(){
        $("#para").css("color", "blue")
  .slideUp(2000)
  .slideDown(2000);
    });
});
</script>