HTML Forms: jQuery Basics -- Effects

By Vincent Wright

The jQuery library has several effects that can be added to almost every HTML element. In this article, we will explore some of these effects and how to add them to your web page.

Hide and Show

jQuery provides a very quick and simple way to hide and show elements. When an element is hidden or shown, all elements below that element are shifted up or down. It is basically as if that element was not there or was added after the fact. These functions allow you to also apply effects to them. This allows an element to animate when it is hidden or displayed.

Hide Sample Code

	<html>
		<head>
			<script type="text/javascript" src="https://ajax.microsoft.com/ajax/jQuery/jquery-1.4.2.min.js"></script>
			<script type="text/javascript">
				$(document).ready(function(){
					$("#HideMe").click(function() {
						$("#HideMe").hide();
					});
				});
			</script>
		</head>
		<body>
			<p id="HideMe">Click me to see me disappear</p>
		</body>
	</html>
		

This code has a paragraph tag that when clicked will be hidden. The jQuery code adds a click event to the paragraph and then attaches a hide method to it when it is clicked.

Show Sample Code

	<html>
		<head>
			<script type="text/javascript" src="https://ajax.microsoft.com/ajax/jQuery/jquery-1.4.2.min.js"></script>
			<script type="text/javascript">
				$(document).ready(function(){
					$("#ShowMe1b").hide();
				
					$("#ShowMe1a").click(function() {
						$("#ShowMe1b").show();
					});
				});
			</script>
		</head>
		<body>
			<p><input type="button" value="Click Me" id="ShowMe1a" /></p>
			<p id="ShowMe1b">I am no longer hidden</p>
		</body>
	</html>
		

This code has a paragraph tag that is hidden when the page is loaded. There is a button to click which will show the hidden paragraph.

Toggle

What if you want to show or hide an element depending if it is visible or not? Well, there is an easy command for that. It is called toggle. This will toggle an element on or off depending on its current state.

Toggle Sample Code

	<html>
		<head>
			<script type="text/javascript" src="https://ajax.microsoft.com/ajax/jQuery/jquery-1.4.2.min.js"></script>
			<script type="text/javascript">
				$(document).ready(function(){
					$("#ToggleMe1a").click(function() {
						$("#ToggleMe1b").toggle();
					});
				});
			</script>
		</head>
		<body>
			<p><input type="button" value="Click Me" id="ToggleMe1a" /></p>
			<p id="ToggleMe1b">I am here!</p>
		</body>
	</html>
		

This code has a paragraph tag that is hidden or displayed when the button is clicked.

Fading

Another animation is fading. You can fade in and out an element. Fading adjusts the elements opacity value. As with hide and show, this will shift elements up or down when faded in or out.

FadeOut Sample Code

	<html>
		<head>
			<script type="text/javascript" src="https://ajax.microsoft.com/ajax/jQuery/jquery-1.4.2.min.js"></script>
			<script type="text/javascript">
				$(document).ready(function(){			
					$("#FadeMeOut").click(function() {
						$("#FadeMeOut").fadeOut();
					});
				});
			</script>
		</head>
		<body>
			<p id="FadeMeOut">Click me to see me fade away to nothing.</p>
		</body>
	</html>
		

This code has a paragraph tag that when clicked will fade out. The jQuery code adds a click event to the paragraph and then attaches a fade out method to it when it is clicked.

FadeIn Sample Code

	<html>
		<head>
			<script type="text/javascript" src="https://ajax.microsoft.com/ajax/jQuery/jquery-1.4.2.min.js"></script>
			<script type="text/javascript">
				$(document).ready(function(){
					$("#FadeIn1b").hide();
				
					$("#FadeIn1a").click(function() {
						$("#FadeIn1b").fadeIn();
					});
				});
			</script>
		</head>
		<body>
			<p><input type="button" value="Click Me" id="FadeIn1a" /></p>
			<p id="FadeIn1b">I am no longer hidden</p>
		</body>
	</html>
		

This code has a paragraph tag that is hidden when the page is loaded. There is a button to click which will fade in the hidden paragraph.

FadeTo Sample Code

	<html>
		<head>
			<script type="text/javascript" src="https://ajax.microsoft.com/ajax/jQuery/jquery-1.4.2.min.js"></script>
			<script type="text/javascript">
				$(document).ready(function(){
					$("#FadeMe").click(function() {
						$("#FadeMe").fadeTo("slow", .5);
					});
				});
			</script>
		</head>
		<body>
			<p id="FadeMe">Click me to see me fade a little</p>
		</body>
	</html>
		

This code has a paragraph tag that when clicked will fade to about half opacity. The jQuery code adds a click event to the paragraph and then attaches a fadeTo method to it when it is clicked. This method requires two arguments, the delay (see below), and the opacity value.

Sliding

Sliding allows you to give HTML elements a sliding effect. You can slide an element up or down. You can also you a command to toggle the element. Just like the fadeIn/fadeOut and show/hide functions, it will shift elements up and down accordingly.

SlideDown Sample Code

	<html>
		<head>
			<script type="text/javascript" src="https://ajax.microsoft.com/ajax/jQuery/jquery-1.4.2.min.js"></script>
			<script type="text/javascript">
				$(document).ready(function(){
					$("#SlideMe1b").hide();
				
					$("#SlideMe1a").click(function() {
						$("#SlideMe1b").slideDown();
					});
				});
			</script>
		</head>
		<body>
			<p><input type="button" value="Click Me" id="SlideMe1a" /></p>
			<div id="SlideMe1b" style="border: thin black solid; background-color: blue; width: 100px; height: 100px;">&nbsp;</div>
		</body>
	</html>
		

The code above uses a div tag to create a box which is hidden when the page is loaded. When the button is pressed, the box slides down into view.

SlideUp Sample Code

	<html>
		<head>
			<script type="text/javascript" src="https://ajax.microsoft.com/ajax/jQuery/jquery-1.4.2.min.js"></script>
			<script type="text/javascript">
				$(document).ready(function(){
					$("#SlideMe1a").click(function() {
						$("#SlideMe1b").slideUp();
					});
				});
			</script>
		</head>
		<body>
			<p><input type="button" value="Click Me" id="SlideMe1a" /></p>
			<div id="SlideMe1b" style="border: thin black solid; background-color: blue; width: 100px; height: 100px;">&nbsp;</div>
		</body>
	</html>
		

The code above uses a div tag to create a box. When the button is pressed, the box slides up out of view.

SlideToggle Sample Code

	<html>
		<head>
			<script type="text/javascript" src="https://ajax.microsoft.com/ajax/jQuery/jquery-1.4.2.min.js"></script>
			<script type="text/javascript">
				$(document).ready(function(){
					$("#SlideMe1a").click(function() {
						$("#SlideMe1b").slideToggle();
					});
				});
			</script>
		</head>
		<body>
			<p><input type="button" value="Click Me" id="SlideMe1a" /></p>
			<div id="SlideMe1b" style="border: thin black solid; background-color: blue; width: 100px; height: 100px;">&nbsp;</div>
		</body>
	</html>
		

Again, this code above uses a div tag to create a box. When the button is pressed, the box will either slide up or down depending if it is visible or not.

Create a Delay

All the functions above support setting a delay. A delay is expressed in milliseconds. You can also use the keywords "slow" or "fast" which represent "600" and "200" milliseconds, respectively. Here is how you would add this:

	$("#HideMe").hide("slow"); // Creates a slow animation
	$("#ShowMe").show("fast"); // Creates a fast animation
	$("#ToggleMe").toggle(2000); // Creates a really slow animation
	$("#FadeMeIn").fadeIn(2000); // Creates a really slow animation
	$("#FadeMeOut").fadeOut(2000); // Creates a really slow animation
	$("#SlideMe").slideUp("slow"); // Creates a slow animation
	$("#SlideMe").slideDown("fast"); // Creates a fast animation
	$("#SlideMe").slideToggle(2000); // Creates a really slow animation
		

Functions After the Animation is Over

All of the above functions support executing code after an animation is complete. This is called a callback function.

	<html>
		<head>
			<script type="text/javascript" src="https://ajax.microsoft.com/ajax/jQuery/jquery-1.4.2.min.js"></script>
			<script type="text/javascript">
				$(document).ready(function(){
					$("#FadeIn1b").hide();
				
					$("#FadeIn1a").click(function() {
						$("#FadeIn1b").fadeIn(function() {
							alert("It is done!");
						});
					});
				});
			</script>
		</head>
		<body>
			<p><input type="button" value="Click Me" id="FadeIn1a" /></p>
			<p id="FadeIn1b">I am no longer hidden</p>
		</body>
	</html>
		

This uses the fadeIn sample code and executes a function after it is done. Once the button is clicked, the paragraph fades in and after it is completed visible executes the function which displays a simple JavaScript alert box.

Conclusion

I hope this small sample of jQuery code and demonstrations shows some of the cool effects you can accomplish with just a little bit of jQuery. Next time we will look into jQuery attributes.



Make a Comment

Loading Comments...

  • Web Development Newsletter Signup

    Invalid email
    You have successfuly registered to our newsletter.
  •  
  •  
  •