FadeIn FadeOut html text div effect using jQuery.

by · January 29, 2009

jquery-logo 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
Get our Articles via Email. Enter your email address.

Tags:

You may also like...

30 Comments

  1. Shabu | Geek Sucks says:
    2 August, 2009, 15:45  

    Any demo will be great to see how it works :)

    Reply
  2. neel says:
    7 October, 2009, 17:45  

    Nice tutorial , is there any demo of this example.

    Reply
  3. Derrick says:
    9 October, 2009, 1:35  

    Agreed. Can you please set up a demo? :)

    Reply
  4. Viral Patel says:
    14 October, 2009, 22:31  

    @Shabu, @Neel, @Derrick : Online demo added. Thanks for the comments.

    Reply
  5. ranacseruet says:
    30 December, 2009, 10:20  

    Nice tutorial, thanks for sharing with us…

    Reply
  6. daddy design says:
    4 February, 2010, 10:40  

    sweet tutorial! ty!

    Reply
  7. Tunge2 says:
    18 March, 2010, 15:21  

    Is it possitble to do it the other way around. if you press the button the text fade in. Instead of pressing the button and fade out

    Reply
  8. Rob says:
    4 June, 2010, 11:10  

    @Tunge2, did you ever find out, I want to do this, so if you did, could you please share how with me. Thanks

    Reply
  9. Ashish says:
    5 July, 2010, 18:53  

    Is it possible to dynamically change text using XML or Access?

    Reply
  10. Ibrahim says:
    19 August, 2010, 10:07  

    Nice. Thank you,

    Reply
  11. ดูหนังออนไลน์ says:
    21 September, 2010, 11:01  

    Nice tutorial , is there any demo of this example.

    Reply
  12. ฟังเพลงออนไลน์ says:
    2 November, 2010, 8:17  

    Nice tutorial, thanks for sharing with us…

    Reply
  13. angela says:
    11 November, 2010, 1:45  

    Thanks, nice tutorial, helped me with my jQuery if else, and fade …

    Reply
  14. dekpress says:
    28 November, 2010, 8:00  

    Is it possitble to do it the other way around. if you press the button the text fade in. Instead of pressing the button and fade out

    Reply
  15. tegid says:
    7 December, 2010, 20:34  

    Is it possible to use jquery to fade in something, say, 5 seconds, after a page had loaded?

    Reply
    • Manoj says:
      20 September, 2013, 13:28  

      yes it is possiable

      Reply
  16. ดูการ์ตูนออนไลน์ says:
    12 December, 2010, 12:00  

    Nice tutorial , is there any demo of this example.

    Reply
    • Vinny says:
      15 September, 2012, 15:55  

      Taking the overeviw, this post is first class

      Reply
  17. Sophia Marie Mina says:
    25 March, 2011, 6:34  

    can u provide the whole source code plz?

    Reply
  18. Tom V says:
    10 May, 2011, 20:26  

    Is it possible to have several content items in the same div the fadein and fadeout automatically – like a rotating banner image?

    Reply
  19. Sekai says:
    14 August, 2011, 4:23  

    Is it Something or sometext in the Div id and the jQuery Id :D

    Reply
  20. Akos Szilagyi says:
    25 October, 2011, 0:40  

    Please let me know where to paste the codes?
    into tha
    or the
    or ect…
    Without this info , we cannot do anything. It maybe obvious to
    pros but to me it is not.
    Please. Thanks

    Reply
  21. Akos Szilagyi says:
    25 October, 2011, 0:40  

    Please let me know where to paste the codes?
    into tha head
    or the body
    or ect…
    Without this info , we cannot do anything. It maybe obvious to
    pros but to me it is not.
    Please. Thanks
    Your comment is aw

    Reply
  22. david yurman outlet says:
    2 November, 2011, 12:09  

    wonderful post-keep ’em coming

    Reply
  23. Chriss says:
    13 January, 2012, 23:48  

    I started my project with this tutorial of your and evolved it to using the opacity fade-in and fade-out technique for images. Check out my tutorial here also on how I have done it. Thanks!
    http://www.crovean.net/single-image-opacity-fade-in-and-out-effect-using-jquery

    Reply
  24. Kinh ap trong says:
    29 March, 2012, 12:32  

    Could you provide some demo of jquery fade effect for entire the website seperated by div block. I cannot remember the name of that application.

    Reply
  25. raubik says:
    6 July, 2012, 17:51  

    Please let me know where to paste the codes?

    Reply
  26. ครีมหน้าขาว says:
    3 December, 2013, 14:43  

    Nice tutorial , is there any demo of this example.

    Reply
  27. สูตรอาหารไทย says:
    1 December, 2014, 9:48  

    Any demo will be great to see how it works :)

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

Follow: