JavaScript Script.aculo.us Fade with a Timer

Learned a new JavaScript thing today: using a timer with the Script.aculo.us library!

It’s nothing terribly fancy but it took me a little to track down everything and in the end it was so easy.

I used a simple JavaScript timer to trigger a function that faded text out.

HTML & JavaScript

<script type="text/javascript">
    Event.observe(window, 'load', function() {
        var fade=setTimeout("fadeout()",3500);
        var hide=setTimeout("$('message').hide()",4800);
    });
    function fadeout(){
        new Effect.Opacity("message", {duration:1.5, from:1.0, to:0.0});
    }       
</script>

<div id="message">Your email has been sent</div>

I’ll walk you through the process I used to create this snippet.

Create the Fade Out Function

I used the Script.aculo.us opacity effect in a simple JavaScript function that went from 100% opaque to 0% opaque in 1.5 seconds.

JavaScript

function fadeout(){
    new Effect.Opacity("message", {duration:1.5, from:1.0, to:0.0});
}   

Start JavaScript Timer on Page Load

Next I used the Prototype Observe Event to get the timer started once the page has finished loading and then hide the div using Prototype’s hide function just before the text fades all the way out.

JavaScript

Event.observe(window, 'load', function() {
    var fade=setTimeout("fadeout()",3500);
    var hide=setTimeout("$('emailmessage').hide()",4800);
});

• Page loads at 0 milliseconds
• Text begins to fade out at 3500 milliseconds (3.5 seconds after the page finishes loading)
• Text is hidden at 4800 milliseconds (4.8 seconds after the page finishes loading)
• Text finishes it’s fade at 5000 milliseconds (5 seconds after the page finishes loading)

Pretty easy and very effective for feedback that a person only needs for just a moment and requires no additional action.

Read more about JavaScript timers at W3C Schools.

---

Prototype 1.6 Delay() Update

Updated 2007 Dec 19

Yesterday I noticed that Prototype made some major updates to the library in November so I thought I’d update the info in this tutorial to incorporate the new Prototype delay() function.

You can replace the HTML / JavaScript combination above with the following.

HTML & JavaScript

<script type="text/javascript"> 
    Event.observe(window, 'load', function() {
        fadeout.delay(3.5);
        Element.hide.delay(4.8, "message");
    });
    function fadeout(){
        new Effect.Opacity("message", {duration:1.5, from:1.0, to:0.0});
    }    
</script>

<div id="message">Your email has been sent</div>

Doesn’t really reduce the space or runtime as far as I know but it’s an update. It’s nice to stay current with new features because you never know when you’ll find a use for them that far surpasses the old way of thinking.

---

Summary

Prototype Functions Used

• Element.delay() new in v.1.6
• Element.hide()

Script.aculo.us Functions Used

• Effect.Opacity()

Tagged as: delay, effect, fade, hide, javascript, js, prototype, script.aculo.us, timer