Home  >  jQuery

Example of animation in jQuery

December 09, 2012
The jQuery animation method can change the css properties at runtime. We can provide a customs animation to a block of html code. The css properties like height, width, color, position etc can be changed on the events.
The syntax of animation
.animate(cssProperties [, timeSpendToRun] [, easingFunction] [,callback] )
cssProperties css properties in key value pare like map.
timeSpendToRun The time duration in which jquery animation will run.
easingFunction This is method that will be use for transition.
Callback callback function is called when animation completes its task.
Jquery animation method dose not use hidden field to do its task where as .slideDown(), .slideUp(), .fadeIn() and fadeOut() create hidden field in there execution.
Example-----------------------------------------------------
<!DOCTYPE html> 
<html>
<head>
    <script src="jquery.js"> </script>
</head>
<body>
 <script> 
$(document).ready(function(){
  $("p").click(function(){
   $("div").animate({
      left:'150px',
      opacity:'0.4',
      height:'200px',
      width:'200px',
	 });
  });
});
</script> 

<pStart Animation</p>

<div style="background:red; height:100px; width:100px; position:absolute"</div>

</body>
</html>
 
FIND MORE TUTORILAS






©2019 concretepage.com | Privacy Policy | Contact Us