The method used to create the custom animation of a set of CSS properties is the animate() method.
Simple syntax to use this method is:
| $(selector).animate({params},speed,callback); |
- The param parameter is the required field. Is defines the CSS properties to be animated.
- Speed parameter is optional which specifies the duration of the effect. Values can be "slow", "fast", or milliseconds.
- Callback parameter is also optional. It is a function which will be used to execute after completing the animation.
Example:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").animate({left: '500px'});
});
});
</script>
</head>
<body>
<p>Click on the button to start animation. </p>
<div style="background:#999;height:200px;width:200px;position:absolute;"></div>
<button style="border:none;border-radius:40px;padding:30px;font-size:26px:background-color:#A52A2A;color:#fff">Start Animation</button>
</body>
</html>
NOTE: By default, all HTML elements have a static position, and cannot be moved. To manipulate the position, remember to first set the CSS position property of the element to relative, fixed, or absolute!
Click Here for output.
0 Comment(s)