Y.Effects.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 CSSin 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 script even if no style is set in the style attribute.

Syntax

new Y.Effects.Appear({ node: "#node", duration: 2});

Y.get("#node").appear({ duration: 2 });

Configuration properties

Properties	Description
from	Opacity to start at. This should be a value from 0 to 1.
to	Opacity to end at. This should be a value from 0 to 1.

Notes

If you're looking for the opposite of this effect, see Y.Effects.Fade.

Demo

Source code of this demo

  
    
    
    <ul>
      <li><a href="#" id="appear_run">Click here for a demo!</a></li>
      <li><a href="#" id="appear_reset">Reset</a></li>
    </ul>
  

  <script type="text/javascript">
    YUI({
      modules: {
        "gallery-effects": {
          fullpath: "http://projects.sophomoredev.com/media/system/js/yui3-gallery/gallery-effects/gallery-effects.js",
          requires: ["node", "anim", "async-queue", "base"]
        }
      }
    }).use("gallery-effects", function (Y) {
    
      Y.get("#appear_run").on("click", function (event) {
        Y.get("#appear_demo").appear();
    
        event.halt();
      });
    
      Y.get("#appear_reset").on("click", function (event) {
         Y.get("#appear_demo").hide();
    
        event.halt();
      });
    
    });
  </script>

< Prev		Next >