Free Online Courses for Software Developers - MrBool
× Please, log in to give us a feedback. Click here to login
×

You must be logged to download. Click here to login

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

How to apply fade and slide effect with jQuery

See in this article how to apply fade and slide effects to visual elements of HTML pages using the jQuery library.

One of the main resources that the JQuery library has is the easy application of special effects to elements. Two of the most used, and for this reason are the focus of this article, are the effects of fading and sliding. The first one functions altering gradually the opacity of an element until the desired point, generally, until the element is completely visible or invisible. The second one functions "rolling" the element into certain direction, until it gets to the desired point, generally, until it appears or desappers completely.

We'll see, throughout this article, that these effects that need some Javascript line codes associated with CSS to be developed can be executed with JQuery use.

Trying to make it more clear how the fade and slide effects work, are presented the Figures 1 and 2 below:

Slide effect

Figure 1: Slide effect

Fade effect

Figure 2: Fade effect

To the examples that shall be presented, we'll use the HTML structure on Listing 1.

Listing 1: HTML structure used on the examples

<DOCTYPE html>
<html>
<head>
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
	<script type="text/javascript">
	    $(function () {
	        // content of the Listings
	    });
	</script>
</head>
<body>
	<button id="btnTest">Click here</button>
	<div id="myDiv" style="height:100px; width:100px; background:green"/>
<body>
</html>

Where we see the commentary "content of the Listings", we must do what's suggested, the code insertion of the Listings in the specified places.

Next, we'll see each effect in detail, with a demonstration a practical example of its use.

fadeIn

This effect makes the target element has its opacity increased, until it reaches 100%, when it becomes totally visible. It can be passed as a parameter the duration and one function of call-back, it means, that will be executed at the ending of the effect. The Listing 2 exhibits shows some forms to visualize this effect.

Listing 2: fadeIn function

$(function(){
	$("#myDiv").hide();
	$("#btnTest").click(function(){			
		//No parameters: the effect runs in 400ms
		$("#myDiv").fadeIn();
		//Parameter: effect duration (in miliseconds)
		$("#myDiv").fadeIn(1000);
		//Parameter: slow - the effect runs in 600ms
		$("#myDiv").fadeIn("slow");
		//Paramter: fast - the effect runs in 200ms
		$("#myDiv").fadeIn("fast");
		//Parameters: effect duration and callback function
		$("#myDiv").fadeIn("fast",
			function(){
				alert("fade effect finished");
			}
		);
	});

});

The function hide() was called on the loading of the page to hide the div, because the fadeIn effect is used to make it visible.

fadeOut

The fadeOut effect does the opposite of the previous function, increasing the transparency of the element until it becomes totally invisible. The structure is quite similar to the fadeIn and the parameters are the same, as shows the Listing 3.

Listing 3: fadeOut function

$("#btnTest").click(function(){			
	//No parameters: the effect runs in 400ms
	$("#myDiv").fadeOut();
	//Parameter: effect duration (in miliseconds)
	$("#myDiv").fadeOut(1000);
	//Paramter: slow - the effect runs in 600ms
	$("#myDiv").fadeOut("slow");
	//Paramter: fast - the effect runs in 200ms
	$("#myDiv").fadeOut("fast");
	//Paramters: effect duration and callback function
	$("#myDiv").fadeOut("fast",
		function(){
			alert("fade effect finished");
		}
	);
});

This time it wasn't necessary to hide the div, because it was the effect of function fadeOut.

fadeTo

It is used to adjust the opacity of an element, passing the new value as second parameter (the first must be the effect's duration). The value of the opacity must be a number betwwen 0 and 1.

Listing 4: fadeTo function

$(function(){
	$("#btnTest").click(function(){			
		//Paramters: effect duration and final opacity value
		$("#myDiv").fadeTo("slow", 0.5);
		//Parameters: effect duration, final opacity value and optionally a callback function
		$("#myDiv").fadeTo("slow", 0.5,
			function(){
				alert("fade effect finished");
			}
		);
	});
});

fadeToggle

The fadeToggle alternates the opacity of the element between maximum and minimum, depending of it's state. It means, if the element is visible, it'll be invisible after the effect, and the same otherwise. Some ways to execute this functions are shown below:

Listing 5: fadeToggle function

$("#btnTest").click(function(){			
	//No parameters: the effect runs in 400ms
	$("#myDiv").fadeToggle();
	//Parameter: effect duration
	$("#myDiv").fadeToggle(1000);
	//Parameter: solow - the effect runs in 600ms		
	$("#myDiv").fadeToggle("slow");
	//Parameter: fast - the effect runs in 200ms		
	$("#myDiv").fadeToggle("fast");
	//Paramters: effect duration and callback function
	$("#myDiv").fadeToggle("slow",
		function(){
			alert("fade effect finished");
		}
	);
}); 

We'll see now the functions relative to the sliding effect.

slideUP

The function slideUp will "bend" the element upwards, receiving the same parameters of the fadeIn function.

Listing 6: slideUp function

$("#btnTest").click(function(){			
	//No parameters: the effect runs in 400ms
	$("#myDiv").slideUp();
	//Parameter: effect duration
	$("#myDiv").slideUp(1000);
	//Parameter: solow - the effect runs in 600ms	
	$("#myDiv").slideUp("slow");
	//Parameter: fast - the effect runs in 200ms
	$("#myDiv").slideUp("fast");
	//Paramters: effect duration and callback function
	$("#myDiv").slideUp("fast",
		function(){
			alert("slide effect finished");
		}
	);
});

slideDown

The slideDown is the exactly opposite of the slideUp, as we can suppose, making the object visible after "unbend" it downwards. The parameters and the structure are the same of the slideUp.

Listing 7: slideDown function

$("#myDiv").hide();
$("#btnTest").click(function(){			
	//No parameters: the effect runs in 400ms
	$("#myDiv").slideDown();
	//Parameter: effect duration
	$("#myDiv").slideDown(1000);
	//Parameter: solow - the effect runs in 600ms	
	$("#myDiv").slideDown("slow");
	//Parameter: fast - the effect runs in 200ms
	$("#myDiv").slideDown("fast");
	//Paramters: effect duration and callback function
	$("#myDiv").slideDown("fast",
		function(){
			alert("slide effect finished");
		}
	);
});

slideToggle

The slideToggle function, on the other hand, works following the same logic of the fadeToggle, but with the sliding effect. If the elememt is visible, it'll be executed the slideUp, if not, the slideDown. The structure and the parameters are all similar as well.

Listing 8: slideToggle function

$(function(){
	$("#btnTest").click(function(){			
		//No parameters: the effect runs in 400ms
		$("#myDiv").slideToggle();
		//Parameter: effect duration
		$("#myDiv").slideToggle(1000);
		//Parameter: solow - the effect runs in 600ms
		$("#myDiv").slideToggle("slow");
		//Parameter: fast - the effect runs in 200ms
		$("#myDiv").slideToggle("fast");
		//Paramters: effect duration and callback function
		$("#myDiv").slideToggle("fast",
			function(){
				alert("slide effect finished");
			}
		);
	});

});

An important aspect, but that was not explict cited, is that the Listings above present many ways to call the same functions, the reader must execute one of each to visualize it's full effect.

Conclusion

We conclude then that's extremely simple the application of certain effects when it's used the JQuery library.

With this, we finish this article. A hug to everyone and see you in the next publication.



Microsoft MVP, Bachelor in Science And Technology, Editor and Consultant at DevMedia with more than 7 years of experience in software development.

What did you think of this post?
Services
[Close]
To have full access to this post (or download the associated files) you must have MrBool Credits.

  See the prices for this post in Mr.Bool Credits System below:

Individually – in this case the price for this post is US$ 0,00 (Buy it now)
in this case you will buy only this video by paying the full price with no discount.

Package of 10 credits - in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download few videos. In this plan you will receive a discount of 50% in each video. Subscribe for this package!

Package of 50 credits – in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download several videos. In this plan you will receive a discount of 83% in each video. Subscribe for this package!


> More info about MrBool Credits
[Close]
You must be logged to download.

Click here to login