-
Notifications
You must be signed in to change notification settings - Fork 0
Effect.Appear
Combination Effects > Effect.Appear
Make an element appear. If the element was previously set to display:none inside the style attribute of the element, the effect will automatically show the element. This means that display must be set within the style attribute of an object, and not in the CSS in the head of the document or a linked file. In other words, this Effect will not work if display:none is set within style tag or linked CSS file.
Effect.Appear('id_of_element');
Effect.Appear('id_of_element', { duration: 3.0 });
There’s also a shortcut method offered which you can call on the element itself. Note, that this will only work on Prototype-extended elements (elements you extended at least once via calling $(element)).
$('id_of_element').appear();
$('id_of_element').appear({ duration: 3.0 });
| Options | Description |
|---|---|
| duration | float value, in seconds, defaults to 1.0 |
| from | float value, defaults to 0.0, percent of opacity to start |
| to | float value, defaults to 1.0, percent of opacity to end |
Can take an options parameter, to control the underlying Effect.Opacity effect.
Works safely with most HTML elements, except table rows, table bodies and table heads.
On Microsoft Internet Explorer, this effect may display a bold/ghosting artifact on elements that don’t have a defined background. It’s unclear if this is a feature or a bug.
Microsoft Internet Explorer can only set opacity on elements that have a ‘layout’. To let an element have a layout, you must set some CSS positional properties, like width or height. See Giving Elements Layout. (Note: This is fixed in V1.5_rc1.)
<div id="appear_demo" style="display:none; width:80px; height:80px; background:#c2defb; border:1px solid #333;"></div>
<ul>
<li><a href="#" onclick="$('appear_demo').appear(); return false;">Click here for a demo!</a></li>
<li><a href="#" onclick="$('appear_demo').hide(); return false;">Reset</a></li>
</ul>