Please navigate to the bottom of the page for Table of Contents

Saturday, June 4, 2011

jQuery fadeIn, fadeOut and fadeTo effects

jQuery lets you easily add effects such as fading in/out, sliding in/out, and expanding/contracting. Anyone claiming to to know jQuery should make themselves very comfortable in the effects provided by jQuery. In this post we will explore the basic jQuery effect of fading in and out using examples. The jQuery API browser (http://view.jquery.com/trunk/tools/api-browser/) is an excellent source of short descriptions and great examples.

Explain fadeIn(), fadeOut() and fadeTo() effects

fadeIn() and fadeOut() manipulate the CSS opacity property to to show or hide an element. In the simplest forms, they can be called with no arguments as shown below:

$("img").fadeOut()

For more complex animations, both the functions also accept optional duration and callback arguments. Durations are given in milliseconds; higher values indicate slower animations, not faster ones. The strings 'fast' and 'slow' can be supplied to indicate durations of 200 and 600 milliseconds, respectively. If any other string is supplied, or if the duration parameter is omitted, the default duration of 400 milliseconds is used.
<div id="clickme">
Click here
</div>
<img id="book" src="book.png" alt="" width="100" height="123" />
With the element initially hidden, we can show it slowly:
$('#clickme').click(function() {
$('#book').fadeIn('slow', function() {
// Animation complete
});
});


fadeTo() works slightly differently from fadeIn and fadeOut. It expects a target opacity argument and animates the change from the element’s current opacity to this target. The function signature looks like


.fadeTo( duration, opacity, [ callback ] )

duration: string or number determining how long the animation will run.
opacity: number between 0 and 1 denoting the target opacity.
callback: function to call once the animation is complete.

For the following html snippet, the following script animates first paragraph to fade to an opacity of 0.33 (33%, about one third visible), completing the animation within 600 milliseconds.


<p>     
Click this paragraph to see it fade.
</p>
<p>
Compare to this one that won't fade.
</p>

$("p:first").click(function () 
{
$(this).fadeTo("slow", 0.33);
});

I encourage the user to read more in detail about the fading effect on the official jQuery API documentation at http://api.jquery.com/category/effects/fading/.

7 comments:

  1. JQUERY FADE IN FADE OUT

    http://fundapass.blogspot.in/2012/07/jquery-fade-in-fade-out.html#more

    ReplyDelete
  2. But wanna admit that this is very helpful , Thanks for taking your time to write this. ux designer san francisco

    ReplyDelete
  3. I think your suggestion would be helpful for me. I will let you know if its work for me too. Thank you for sharing this beautiful articles. thanks a lot ux designer san francisco

    ReplyDelete
  4. Wow! This could be one particular of the most helpful blogs We’ve ever arrive across on this subject. Basically Excellent. I’m also an expert in this topic therefore I can understand your effort. iphone sketch

    ReplyDelete
  5. It’s scarce to discover a professional on whom you would have quite a few put your confidence in. Anywhere today occasion, no-one really cares about displaying other ones the answer for any in such an subjecttopic. The correct way fortuitous I happen to be for getting decidedly established actually awesome internet business since this. It’s people like you who seem to produce a real improvement on earth by the procedures most people investigate. ipad png

    ReplyDelete
  6. Thanks meant for sharing this type of satisfying opinion, written piece is fastidious, that’s why I’ve read it completely.
    digital product design agency

    ReplyDelete