Fade in, fade out

Posted in Code — July 26, 2010

One of the more popular articles over on my old site was a tutorial that explained how to use script.aculo.us to fade a div in and out, so I thought I’d update the article and show how to do it with jQuery as well.

Note: The original post on my old site now redirects here.

script.aculo.us

The first thing we need to do is include the Prototype library and scriptaculous (scriptaculous depends on Prototype). For the sake of simplicity, we’ll use Google’s hosted version:

<script src="http://ajax.googleapis.com/ajax/libs/prototype/1/prototype.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/scriptaculous/1/scriptaculous.js" type="text/javascript"></script>

Now we build the HTML:

<p><a href="javascript:Effect.toggle('demo','appear');">Click me to toggle!</a></p>
 
<div id="demo">
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
    <p>Vestibulum auctor lacus id lectus.</p>
</div>

Here’s the final result:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <title>scriptaculous toggle fade effect demo</title>
        <script src="http://ajax.googleapis.com/ajax/libs/prototype/1/prototype.js" type="text/javascript"></script>
        <script src="http://ajax.googleapis.com/ajax/libs/scriptaculous/1/scriptaculous.js" type="text/javascript"></script>
    </head>
 
    <body>
        <p><a href="javascript:void(0);" onclick="Effect.toggle('demo','appear');">Click me to toggle!</a></p>
 
        <div id="demo">
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
            <p>Vestibulum auctor lacus id lectus.</p>
        </div>
    </body>
</html>

Here’s an example using the code above (with some CSS applied to pretty it up).

jQuery

As with the scriptaculous example above, we need to include the jQuery library. Again, we’ll use Google’s hosted version:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

It’s a little trickier to get the fading toggle with jQuery, because there’s no built-in way to do it.

Note: Actually, you can use .toggle() or .slideToggle(), but that doesn’t really achieve the same effect (here’s a .toggle() example and here’s a .slideToggle() example).

The first thing you’ll need to do is create a fadeToggle function using .animate() (pilfered from this Google Groups post):

jQuery.fn.fadeToggle = function(speed, easing, callback) {
    return this.animate({opacity: 'toggle'}, speed, easing, callback);
};

Now we call the function we just created when #demo_toggler is clicked:

$("#demo_toggler").click(function() {
    $("#demo").fadeToggle("slow");
});

Next up is the HTML:

<p><a href="javascript:void(0);" id="demo_toggler">Click me to toggle!</a></p>
 
<div id="demo">
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
    <p>Vestibulum auctor lacus id lectus.</p>
</div>

Here’s the final result:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <title>jquery toggle fade effect demo</title>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){
                jQuery.fn.fadeToggle = function(speed, easing, callback) {
                    return this.animate({opacity: 'toggle'}, speed, easing, callback);
                };
 
                $("#demo_toggler").click(function() {
                    $("#demo").fadeToggle("slow");
                });
            });
        </script>
    </head>
 
    <body>
        <p><a href="javascript:void(0);" id="demo_toggler">Click me to toggle!</a></p>
 
        <div id="demo">
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
            <p>Vestibulum auctor lacus id lectus.</p>
        </div>
    </body>
</html>

And, finally, here’s the example using jQuery.

@jmock

Fade in, fade out

script.aculo.us

jQuery