Y.Effects.Highlight

This effect flashes a color as the background of an element. It is mostly used to draw attention to a part of the page that has been updated via JavaScript or AJAX, when the update would not otherwise be obvious.

Syntax

new Y.Effects.Highlight([options]);

Y.one("#node").highlight([options]);

Configuration properties

Properties	Description
startColor	The color of the first frame. (Defaults to light yellow.)
endColor	The color of the last frame. (Defaults to white.)
restoreColor	If defined, this sets the color of background for the selected node when finished. It's best to pass in the expected color as this is dynamically calculated when the highlight effect is executed and can sometimes be wrong. If it's not specified, we try to determine the background color when the effect begins and set the background color back to that.

Notes

None.

Demo

This paragraph exists for demo purposes. Click the link below and it will make your day bright!
Highlight me!

Source code of this demo

  
    

      This paragraph exists for demo purposes. Click the link below and it will make your day bright!

     
      <a href="#">Highlight me!</a>
     
  

  <script type="text/javascript">
    YUI({
      modules: {
        "gallery-effects": {
          fullpath: "http://projects.sophomoredev.com/media/system/js/yui3-gallery/gallery-effects/gallery-effects-min.js",
          requires: ["node", "anim", "async-queue", "base"]
        }
      }
    }).use("gallery-effects", function (Y) {
    
      Y.get("#highlight_demo").on("click", function (event) {
        this.ancestor().highlight({ startColor: "#f9f", endColor: "#fff" });
        event.halt();
      });
    
    });
  </script>

< Prev		Next >