Effect.Puff
Combination Effects > Effect.Puff
Gives the illusion of the element puffing away (like a in a cloud of smoke).
Examples
Effect.Puff('id_of_element');
Effect.Puff('id_of_element', { duration: 3 });
$('id_of_element').puff();
$('id_of_element').puff({ duration: 3 });
Options
| Options | Description |
|---|---|
| duration | float value, in seconds, defaults to 1.0 |
| from | float value, defaults to 0.0, percent of animation to start |
| to | float value, defaults to 1.0, percent of animation to end |
Notes
Works safely with most block elements, except tables.
Demo
Source code of the demo
<div id="puff_demo" style="width:80px; height:80px; background:#c2defb; border:1px solid #333;"></div>
<ul>
<li><a href="#" onclick="new Effect.Puff('puff_demo'); return false;">Click here for a demo!</a></li>
<li><a href="#" onclick="$('puff_demo').setStyle({ display: 'block', opacity:1, width:'80px', height:'80px' }); return false;">Reset</a></li>
</ul>
