Objectives and outcomes

In this tutorial we are going to learn about jquery animate effect. We can manipulate the css properties of HTML elements using jquery animate() methods. Example for the same is shown below:



Syntax for method

$(selector).animate({parameters},speed,callback);

You can learn about selector in our Jquery selector tutorial while the speed parameter defines the pace of the effect. It can have values like "slow", "fast" and milliseconds. callback parameter is a function which is executed after the animate method complete its execution.
Note: Both the parameters are optional whereas {parameters} argument is not optional.




Click the button and observe the effect






HTML code:

<html>
<head>
<meta charset="utf-8">
<title>Jquery animate effect</title>
<script src="jquery/jquery.min.js"></script>
</head>
<body>
<div id="example">
<br/>
<p>Click the button and observe the effect</p><br/>
</div>
<br/>
<button id="butn1">Animate</button><br/>
</body>
</html>


CSS stylesheet

<style>
#example
{
color:#fff;
font-size:18px;
height:100px;
text-align:center;
opacity:0.5;
}
</style>


Javascript

<script>
$(document).ready(function()
{
$('#butn1').click(function()
{
$('#example').animate(
{
fontSize:'24px',
opacity:'1'
});
});
});
</script>


We can manipulate almost all properties with animate() method but for properties like 'margin-left' we have to use camelcase format for example: 'marginLeft' like we have used for font-size in the above example.