Jquery animate() method performs a custom animation of a set of CSS properties to change the state of an element from one to another.
It is to note that only numeric values can be animated (e.g. height: "100px"). String values (e.g. "background-color:green") cannot be animated.
Syntax:
$(selector).animate( {styles}, speed, easing, callback)
where
| Parameters |
Description |
Required/Optional |
| styles |
It determines the css property to animate. The property should be camel-cased like marginLeft instead of margin-left. |
Required |
| speed |
Determines the speed of the animation (fast, slow, milliseconds). Default value is 400 milliseconds. |
Optional |
| easing |
Determines the speed of the element at different points of the animation (swing or linear). Default value is swing. |
Optional |
| callback |
After the animation completes, callback has to be executed. |
Optional |
Example:
<!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: '150px'}, 3000);
});
});
</script>
</head>
<body>
<button>Start</button>
<div style="background:red;height:100px;width:100px;position:absolute;">
</div>
</body>
</html>
1 Comment(s)