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. Alternatively, display:none can be set using a document.getElementById script even if no style is set in the style attribute.

Examples


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

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

Notes

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.)

The opposite of Effect.Appear is Effect.Fade.

Demo

Source code of this demo


<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>

Applying Appear to invisible elements

Recall that display:none and visibility:hidden both make an element invisible, but elements with visibility:hidden are not collapsed. You cannot apply Effect.Appear to elements with style=“visibility: hidden” because this function only alters “display”. Below is a workaround. I don’t know what’s going on with the demo, but it looks flawlessly when I use it on my website…


$('myBox').setOpacity(0);
$('myBox').setStyle({visibility: 'visible'});
new Effect.Opacity(
   'myBox', { 
      from: 0.0, 
      to: 1.0,
      duration: 1.0
   }
);

script.aculo.us