JQuery: fading elements

In this post we’ll keep looking at the animations and we’ll see how to add fading effects to an element. Unlike showing and hiding, which affect several css properties of the element, fading will only affect the opacity (alpha filters if you’re running IE) and display of an element. Currently, JQuery offers 3 methods: fadeIn, fadeOut and fadeTo.

Here’s a small sample that shows how you can use the fadeIn and fadeOut methods:

<p id="div2">div 2</p>
<input type="button" value="fade in/out" />
<script type="text/javascript">
    $(function() {
                    function() { $("p").fadeOut(300); },
                    function() { $("p").fadeIn(300); }

If you run the previous snippet, you’ll see that odd clicks change the element’s opacity in 300 ms and then it will be “removed” from the view (ie, its display will be set to none at the end of the animation). Fading in performs the opposite operation, changing the opacity from 0 to 1. Both methods can receive two parameters:

  • the first indicates the speed  to run the animation. You can specify it in milliseconds (like we did in the previous snippet) or you can use one of the “magic” strings: slow, fast or def (stands for default). Notice that passing anything different from slow or fast is the same as passing def;
  • the second identifies a callback function which will be fired when the animation ends. You can use the this reference inside the function to get a reference to the DOM element that was animated.

If you’ve set an initial opacity to the element by applying a style, then that value will be retained by these methods and fading in will always recover the element’s initial opacity.

If you’ve run the previous sample, you’ve probably noticed that fading in and out result in setting the opacity to 1 and 0 respectively. In other words,those methods will always show or hide an element. If you need to go half way (ex.: change the opacity to 0.5),then you should use the fadeTo method. Let’s update the previous sample so that it fades an element between 0.2 and 0.8:

<script type="text/javascript">
    $(function() {
                    function() { $("p").fadeTo(300, 0.2); },
                    function() { $("p").fadeTo(300, 0.8); }

The fadeTo method expects until 3 parameters:

  • the first indicates the speed (it’s used in the same way as the speed parameter used in the fadeIn and fadeOut methods. Notice that you can also use the same “magic” strings we’ve mentioned above);
  • the second indicates the final value of the opacity and should have a value between 0 and 1;
  • finally, you can pass an (optional) callback method which will be fired when the animation completes.

There’s a really important difference between fadeTo and the previous fade methods: fadeTo won’t do anything to the css display property of the element that is being animated.

And that’s it. In the next post we’ll take a look at sliding. Keep tuned for more on JQuery.


~ by Luis Abreu on August 12, 2009.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: