jQuery Animation Effects - basics - jQuery Snipplr Social Repository

Revision: 35053

at November 1, 2010 22:34 by adsrikanth

Updated Code

<html> 
<head> 
<title>Animation Effects - jQuery Basics</title> 
<meta name="description" content="jQuery animation effects - Basic Tutorial for custom animations like slide, toggle, fade, show/hide a DIV"> 
<script src="http://code.jquery.com/jquery-1.4.3.min.js" type="text/javascript"></script> 
<!-- Stylesheet -->
<style type="text/css">
#box1 {
width: 200px;
height: 200px;
background: blue;
display: none;
}
#box2 {
width: 200px;
height: 200px;
background: green;
}
#box3 {
width: 200px;
height: 200px;
background: orange;
display: none;
position: relative;
}
#box4 {
width: 200px;
height: 200px;
background: red;
position: relative;
}
#box5 {
width: 200px;
height: 200px;
background: brown;
display: none;
position: relative;
}
#box6 {
width: 200px;
height: 200px;
background: purple;
position: relative;
}
#box7 {
width: 200px;
height: 200px;
background: maroon;
position: relative;
}
#box8 {
width: 200px;
height: 200px;
background: black;
position: relative;
}
a {
text-decoration: none;
}
a:hover {
color: #070F0B;
font-weight: bold;
}


</style> 
<script type="text/javascript"> 
/* Calling the Generic Function for Jquery */
/* Strings are written in single quotes, whereas numbers are not in quotes */
/* Transitions takes place in 3000 milliseconds */ 
$(function() {
/* On CLicking the link with id = a1, perform the following action */
		$('a#a1').click(function() {
/* Fade in the DIV with id = box, with initial display (of the DIV) set to none */
		$('#box1').fadeIn(3000); 
					});
/* On clicking the link with id = a2, perform the following action */
		$('a#a2').click(function() {
/* Fade out the DIV with id = box2 */
		$('#box2').fadeOut(3000);
					});
		$('a#a3').click(function() {
/* Show the DIV with id = box3, initial display being none */
		$('#box3').show(3000);
					});
		$('a#a4').click(function() {
/* Hide the DIV with ID = box4 */
		$('#box4').hide(3000);
					});
		$('a#a5').click(function() {
/* SlideDown the DIV with ID = box5 */
		$('#box5').slideDown(3000);
					});
		$('a#a6').click(function() {
/* SlideUp the DIV with ID = box6 */
		$('#box6').slideUp(3000);
					});
		$('a#a7').click(function() {
/* Toogle Slide the DIV with ID = box7 */
		$('#box7').slideToggle(3000);
					});
		$('a#a8').click(function() {
/* Change the opacity of the DIV with ID = box8 */
		$('#box8').fadeTo('slow', 0.5, function() {
					}); });
	});
</script> 
</head> 
<body> 
<h3>Animation Effects - jQuery Basics</h3> 
<table cellpadding="2px"> 
<tr> 
	<td valign="top" width="220px"> 
		<div id="box1"></div> 
		<a href="#" id="a1">Click to fade in a DIV</a> 
	</td> 
	<td valign="top" width="220px"> 
		<div id="box2"></div> 
		<a href="#" id="a2">Click to fade out a DIV</a> 
	</td> 
	<td valign="top" width="220px"> 
		<div id="box3"></div> 
		<a href="#" id="a3">Click to show a DIV</a> 
	</td> 
</tr> 
<tr> 
	<td valign="top" width="220px"> 
		<div id="box4"></div> 
		<a href="#" id="a4">Click to hide a DIV</a> 
	</td> 
	<td valign="top" width="220px"> 
		<div id="box5"></div> 
		<a href="#" id="a5">Click to slide down a DIV</a> 
	</td> 
	<td valign="top" width="220px"> 
		<div id="box6"></div> 
		<a href="#" id="a6">Click to slide up a DIV</a> 
	</td> 
</tr> 
<tr> 
	<td valign="top" width="220px"> 
	<div id="box7"></div> 
	<a href="#" id="a7">Click to toggle slide a DIV</a> 
	</td> 
	<td valign="top" width="220px"> 
	<div id="box8"></div> 
	<a href="#" id="a8">Click here to change the opacity of a DIV</a> 
	</td> 
</tr> 
</table> 
</body> 
</html>

Revision: 35052

at November 1, 2010 22:31 by adsrikanth

Initial Code

<html> 
<head> 
<title>Animation Effects - jQuery Basics</title> 
<meta name="description" content="jQuery animation effects - Basic Tutorial for custom animations like slide, toggle, fade, show/hide a DIV"> 
<script src="http://code.jquery.com/jquery-1.4.3.min.js" type="text/javascript"></script> 
<!-- Link the stylesheet of type CSS and its HREF --> 
<link rel="stylesheet" type="text/css" href="style.css" /> 
<script type="text/javascript"> 
/* Calling the Generic Function for Jquery */
/* Strings are written in single quotes, whereas numbers are not in quotes */
/* Transitions takes place in 3000 milliseconds */ 
$(function() {
/* On CLicking the link with id = a1, perform the following action */
		$('a#a1').click(function() {
/* Fade in the DIV with id = box, with initial display (of the DIV) set to none */
		$('#box1').fadeIn(3000); 
					});
/* On clicking the link with id = a2, perform the following action */
		$('a#a2').click(function() {
/* Fade out the DIV with id = box2 */
		$('#box2').fadeOut(3000);
					});
		$('a#a3').click(function() {
/* Show the DIV with id = box3, initial display being none */
		$('#box3').show(3000);
					});
		$('a#a4').click(function() {
/* Hide the DIV with ID = box4 */
		$('#box4').hide(3000);
					});
		$('a#a5').click(function() {
/* SlideDown the DIV with ID = box5 */
		$('#box5').slideDown(3000);
					});
		$('a#a6').click(function() {
/* SlideUp the DIV with ID = box6 */
		$('#box6').slideUp(3000);
					});
		$('a#a7').click(function() {
/* Toogle Slide the DIV with ID = box7 */
		$('#box7').slideToggle(3000);
					});
		$('a#a8').click(function() {
/* Change the opacity of the DIV with ID = box8 */
		$('#box8').fadeTo('slow', 0.5, function() {
					}); });
	});
</script> 
</head> 
<body> 
<h3>Animation Effects - jQuery Basics</h3> 
<table cellpadding="2px"> 
<tr> 
	<td valign="top" width="220px"> 
		<div id="box1"></div> 
		<a href="#" id="a1">Click to fade in a DIV</a> 
	</td> 
	<td valign="top" width="220px"> 
		<div id="box2"></div> 
		<a href="#" id="a2">Click to fade out a DIV</a> 
	</td> 
	<td valign="top" width="220px"> 
		<div id="box3"></div> 
		<a href="#" id="a3">Click to show a DIV</a> 
	</td> 
</tr> 
<tr> 
	<td valign="top" width="220px"> 
		<div id="box4"></div> 
		<a href="#" id="a4">Click to hide a DIV</a> 
	</td> 
	<td valign="top" width="220px"> 
		<div id="box5"></div> 
		<a href="#" id="a5">Click to slide down a DIV</a> 
	</td> 
	<td valign="top" width="220px"> 
		<div id="box6"></div> 
		<a href="#" id="a6">Click to slide up a DIV</a> 
	</td> 
</tr> 
<tr> 
	<td valign="top" width="220px"> 
	<div id="box7"></div> 
	<a href="#" id="a7">Click to toggle slide a DIV</a> 
	</td> 
	<td valign="top" width="220px"> 
	<div id="box8"></div> 
	<a href="#" id="a8">Click here to change the opacity of a DIV</a> 
	</td> 
</tr> 
</table> 
</body> 
</html>

Initial URL

http://srikanth.techonaut.com/code/jquery/jquery-animation-effects-basics.html

Initial Description

Initial Title

jQuery Animation Effects - basics

Initial Tags

javascript, jquery

Initial Language

jQuery

Choose a language for easy browsing: