4.3. Toggling Effects
Scriptaculous offers a neat utility function, Effect.toggle, which allows elements to be shown or hidden using different animations. If an element is hidden, it shows it, and if it is visible, then it hides it.
Effect.toggle('id'[,effectType = 'appear');
| property | type | values | description |
|---|---|---|---|
| effectType | string | 'appear' | toggle between Effect.Appear and Effect.Fade |
| 'blind' | toggle between Effect.BlindUp and Effect.BlindDown | ||
| 'slide' | toggle between Effect.SlideUp and Effect.SlideDown |
We may user the methods above to create an activity indicator. We first create a div tag, representing that activity is occurring:
<div id='activity' style='display:none'><img src="activity.gif"></div>
We may activate this using Appear:
Effect.Appear('activity',{duration:0.5,queue:'end'};
And deactivate this using Fade:
Effect.Fade('activity',{duration:0.5,queue:'end'};
Example 4-3. activity.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="Content-Script-Type" content="text/javascript"/> <title>Using Scriptaculous</title> <script src="js/prototype.js" ></script> <script src="js/scriptaculous.js"></script> <script> function start() { $('activity').hide(); Effect.Appear('activity',{duration:0.5,queue:'end'}); showInfo(); } function stop() { Effect.Fade('activity',{duration:0.5,queue:'end'}); } </script> </head> <body> <div id='activity' style="display:none; ... |
Get Prototype and Scriptaculous: Taking the Pain out of JavaScript now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.
