ViralPatel.net

Web 2.0 applications have became pervasive today. Lots of new features using AJAX, JavaScript, DHTML etc have been incorporated in web applications to make them rich in user appeal. One of the framework that has changed the way we write client side code is jQuery. Let us see a simple trick to FadeIn and FadeOut a text using jQuery. This code can be easily generalized for any html component. FadeIn works by changing the visibility of any text/div/html component gradually from transparent to solid and vica versa for FadeOut. For different browsers there are different ways to achieve this. Using jQuery we can avoid cross browser issues and can directly implement FadeIn/FadeOut effect.

FadeIn Example in jQuery

Consider following text in div.

<div id="sometext">
 This text will Fade In and Out.
</div>
Code language: HTML, XML (xml)

Now we can use jQuery to fadein and out this text. Just copy following text.

$("#something").fadeOut("slow");
...
$("#something").fadeOut(2000);
...
$("#something").fadeOut("slow", function() {
 alert("Animation done");
});
Code language: JavaScript (javascript)

I have shown 3 tricks to fade out a div/text. In first code, a div with id something is slowly fade out using fadeOut() function. Note that we have passed an argument “slow”. You can also pass a number that represents milliseconds in this function. fadeOut() function also takes second argument which is a call back function that gets called when animation is over. Here in the example I have passed a simple handler function that alerts a text after the animation. Similarly you can use fadeIn() function to achieve fade in functionality.

$("#something").fadeIn("slow");
...
$("#something").fadeIn(2000);
...
$("#something").fadeIn("slow", function() {
 alert("Animation done");
});
Code language: JavaScript (javascript)

The below code will fadeIn all the text in paragraph <p> tag.

$("p").fadeIn("slow",function(){
 alert("Animation Done.");
});
Code language: JavaScript (javascript)

Using fadeTo to reach a certain transparency.

We can use fadeTo() function of jQuery to set opacity of all matched elements to a specified opacity and firing an optional callback after completion. Only the opacity is adjusted for this animation, meaning that all of the matched elements should already have some form of height and width associated with them.

$("p").fadeTo("slow", 0.5);
...
$("p").fadeTo("slow", 0.5, function(){
 alert("Animation Done.");
});
Code language: JavaScript (javascript)

Hope you will like this trick. jQuery is simply amazing. Update: Adding Online Demo for FadeIn FadeOut using jQuery.

Online Demo

Click Here to view Demo