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/.

9 comments:

  1. JQUERY FADE IN FADE OUT

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

    ReplyDelete
    Replies
    1. I am glad that I saw this post. It is informative blog for us and we need this type of blog thanks for share this blog, Keep posting such instructional blogs and I am looking forward for your future posts. Python Projects for Students Data analytics is the study of dissecting crude data so as to make decisions about that data. Data analytics advances and procedures are generally utilized in business ventures to empower associations to settle on progressively Python Training in Chennai educated business choices. In the present worldwide commercial center, it isn't sufficient to assemble data and do the math; you should realize how to apply that data to genuine situations such that will affect conduct. In the program you will initially gain proficiency with the specialized skills, including R and Python dialects most usually utilized in data analytics programming and usage; Python Training in Chennai at that point center around the commonsense application, in view of genuine business issues in a scope of industry segments, for example, wellbeing, promoting and account. Project Center in Chennai

      Delete
  2. This is an awesome post. Really very informative and creative contents. This concept is a good way to enhance knowledge. I like it and help me to development very well. Thank you for this brief explanation and very nice information. Well, got good knowledge.
    WordPress development company in Chennai

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

    ReplyDelete
  4. 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
  5. 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
  6. 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
  7. 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