Web Technology - Old Questions
6. How jQuery animate can be used to create custom animation? Write syntax with sample script.[2+3]
5 marks
|
Asked in 2076(new)
The animate() method performs a custom animation of a set of CSS properties. This method changes an element from one state to another with CSS styles. The CSS property value is changed gradually, to create an animated effect. Only numeric values can be animated (like "margin:30px"). String values cannot be animated (like "background-color:red"), except for the strings "show", "hide" and "toggle".
Syntax:
$(selector).animate({ properties }, duration, callback);
- properties parameter defines the CSS properties to be animated.
- duration parameter is optional and specifies the duration of the effect. It can be set as "slow" , "fast" or milliseconds.
- callback parameter is also optional and it is a function which is executed after the animation completes.
Example:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/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:#98bf21;height:100px;width:100px;position:absolute;"></div>
</body>
</html>