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>