SOURCE CODE: Fading Links
VIEW EXAMPLE

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Fading Links | JavaScript Examples | UIZE JavaScript Framework</title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
  <meta name="keywords" content="animation widget Uize.Widget.HoverFader"/>
  <meta name="description" content="Elegant menu animation effects to liven up any dull Web page! This JavaScript example shows you what is possible with the UIZE JavaScript Framework."/>
  <link rel="alternate" type="application/rss+xml" title="UIZE JavaScript Framework - Latest News" href="http://www.uize.com/latest-news.rss"/>
  <link rel="stylesheet" href="../css/page.css"/>
  <link rel="stylesheet" href="../css/page.example.css"/>
  <style type="text/css">
    .menus {
      width:675px;
      margin:auto;
    }
    .menus .menu {
      width:115px;
      float:left;
      margin:0 10px;
    }
    .menus .menu .menuHeading, .menuLink {
      display:block;
      width:99px;
      padding:2px 7px;
    }
    .menuLink, .menuLink:link, .menuLink:visited, .menuLink:hover, .menuLink:active {
      color:#bbb;
      background:#000;
      border:1px solid #555;
      margin-bottom:1px;
      text-decoration:none;
    }
    .menus .menu .menuHeading {
      letter-spacing:0;
      text-transform:none;
    }
  </style>
</head>

<body>

<script type="text/javascript" src="../js/Uize.js"></script>

<h1 class="header">
  <a id="page-homeLink" href="../index.html" title="UIZE JavaScript Framework home"></a>
  <a href="../index.html" class="homeLinkText" title="UIZE JavaScript Framework home">UIZE JavaScript Framework</a>
</h1>

<div class="main">
  <h1 class="document-title">
    <a href="../javascript-examples.html" class="breadcrumb breadcrumbWithArrow">JAVASCRIPT EXAMPLES</a>
    Fading Links
    <div class="pageActionsShell">
      <div id="page-actions" class="pageActions"><a href="source-code/fading-links.html" class="buttonLink">SOURCE</a></div>
    </div>
  </h1>

  <!-- explanation copy -->

  <div class="explanation">
    <p>In this example, the <a href="../reference/Uize.Widget.HoverFader.html"><code>Uize.Widget.HoverFader</code></a> widget class is being used to add a JavaScript animation color fading effect to the links in five different menus (seen below). An instance of <code>Uize.Widget.HoverFader</code> is created for each menu. Each instance manages the color fade effect for all the links in a menu, allowing each menu to have different effect settings. Mouse over the links in the menus to experience the different color settings for each. Notice that, while the first three menus have pretty short fade-out times, the fade-out time in the last two menus is quite long, and the fade-in time is longer as well.</p>

    <p>The <code>Uize.Widget.HoverFader</code> class lets you fade color CSS style properties (such as <code>color</code>, <code>backgroundColor</code>, <code>borderColor</code>, <code>borderColorTop</code>, etc.), as well as position and dimension properties (such as <code>padding</code>, <code>margin</code>, <code>fontSize</code>, <code>borderWidth</code>, <code>borderLeftWidth</code>, etc.). You can also set the fade-in and fade-out durations, as well as other properties of the fade-in and fade-out (such as <code>acceleration</code> and <code>deceleration</code>). Take a look at the source code for this page to see how the menus are configured with different settings. Worth noting is that this example uses the declarative syntax for widget adoption, so you will see the widget declarations next to the HTML for the individual menus.</p>
  </div>

  <div class="menus">
    <div id="menu1" class="menu">
      <div class="exampleSectionHeading menuHeading">black on white</div>
      <a href="javascript://" class="menuLink">About Us</a>
      <a href="javascript://" class="menuLink">Products</a>
      <a href="javascript://" class="menuLink">Services</a>
      <a href="javascript://" class="menuLink">Technology</a>
      <a href="javascript://" class="menuLink">Solutions</a>
      <a href="javascript://" class="menuLink">My Account</a>
      <a href="javascript://" class="menuLink">Store Locator</a>
      <a href="javascript://" class="menuLink">Investors</a>
      <a href="javascript://" class="menuLink">Support</a>
      <a href="javascript://" class="menuLink">Contact Us</a>
    </div>
    <script type="text/javascript">
      window.$page_menu1HoverFader = {
        widgetClass:'Uize.Widget.HoverFader',
        nodes:{root:'menu1',className:/\bmenuLink\b/},
        defaultStyle:{color:'bbb',backgroundColor:'000',width:99,borderLeftWidth:1},
        hoverStyle:{color:'000',backgroundColor:'fff',width:89,borderLeftWidth:11}
      };
    </script>
    <div id="menu2" class="menu">
      <div class="exampleSectionHeading menuHeading">white on gray</div>
      <a href="javascript://" class="menuLink">About Us</a>
      <a href="javascript://" class="menuLink">Products</a>
      <a href="javascript://" class="menuLink">Services</a>
      <a href="javascript://" class="menuLink">Technology</a>
      <a href="javascript://" class="menuLink">Solutions</a>
      <a href="javascript://" class="menuLink">My Account</a>
      <a href="javascript://" class="menuLink">Store Locator</a>
      <a href="javascript://" class="menuLink">Investors</a>
      <a href="javascript://" class="menuLink">Support</a>
      <a href="javascript://" class="menuLink">Contact Us</a>
    </div>
    <script type="text/javascript">
      window.$page_menu2HoverFader = {
        widgetClass:'Uize.Widget.HoverFader',
        nodes:{root:'menu2',className:/\bmenuLink\b/},
        defaultStyle:{color:'bbb',backgroundColor:'000',borderColor:'555'},
        hoverStyle:{color:'fff',backgroundColor:'777',borderColor:'bbb'}
      };
    </script>
    <div id="menu3" class="menu">
      <div class="exampleSectionHeading menuHeading">black on orange</div>
      <a href="javascript://" class="menuLink">About Us</a>
      <a href="javascript://" class="menuLink">Products</a>
      <a href="javascript://" class="menuLink">Services</a>
      <a href="javascript://" class="menuLink">Technology</a>
      <a href="javascript://" class="menuLink">Solutions</a>
      <a href="javascript://" class="menuLink">My Account</a>
      <a href="javascript://" class="menuLink">Store Locator</a>
      <a href="javascript://" class="menuLink">Investors</a>
      <a href="javascript://" class="menuLink">Support</a>
      <a href="javascript://" class="menuLink">Contact Us</a>
    </div>
    <script type="text/javascript">
      window.$page_menu3HoverFader = {
        widgetClass:'Uize.Widget.HoverFader',
        nodes:{root:'menu3',className:/\bmenuLink\b/},
        defaultStyle:{color:'bbb',backgroundColor:'000'},
        hoverStyle:{color:'000',backgroundColor:'ffa200'}
      };
    </script>
    <div id="menu4" class="menu">
      <div class="exampleSectionHeading menuHeading">orange on black</div>
      <a href="javascript://" class="menuLink">About Us</a>
      <a href="javascript://" class="menuLink">Products</a>
      <a href="javascript://" class="menuLink">Services</a>
      <a href="javascript://" class="menuLink">Technology</a>
      <a href="javascript://" class="menuLink">Solutions</a>
      <a href="javascript://" class="menuLink">My Account</a>
      <a href="javascript://" class="menuLink">Store Locator</a>
      <a href="javascript://" class="menuLink">Investors</a>
      <a href="javascript://" class="menuLink">Support</a>
      <a href="javascript://" class="menuLink">Contact Us</a>
    </div>
    <script type="text/javascript">
      window.$page_menu4HoverFader = {
        widgetClass:'Uize.Widget.HoverFader',
        nodes:{root:'menu4',className:/\bmenuLink\b/},
        defaultStyle:{color:'bbb',borderColor:'555'},
        hoverStyle:{color:'ffa200',borderColor:'ffa200'},
        fadeIn:{duration:500,deceleration:1},
        fadeOut:{duration:750,acceleration:1}
      };
    </script>
    <div id="menu5" class="menu">
      <div class="exampleSectionHeading menuHeading">white on pastel</div>
      <a href="javascript://" class="menuLink">About Us</a>
      <a href="javascript://" class="menuLink">Products</a>
      <a href="javascript://" class="menuLink">Services</a>
      <a href="javascript://" class="menuLink">Technology</a>
      <a href="javascript://" class="menuLink">Solutions</a>
      <a href="javascript://" class="menuLink">My Account</a>
      <a href="javascript://" class="menuLink">Store Locator</a>
      <a href="javascript://" class="menuLink">Investors</a>
      <a href="javascript://" class="menuLink">Support</a>
      <a href="javascript://" class="menuLink">Contact Us</a>
    </div>
    <script type="text/javascript">
      window.$page_menu5HoverFader = {
        widgetClass:'Uize.Widget.HoverFader',
        nodes:{root:'menu5',className:/\bmenuLink\b/},
        defaultStyle:{color:'bbb',backgroundColor:'000',borderColor:'555'},
        hoverStyle:{color:'fff',backgroundColor:'77a',borderColor:'000'},
        fadeIn:{duration:500,deceleration:1},
        fadeOut:{duration:750,acceleration:1}
      };
    </script>
  </div>

  <br style="clear:left;"/>
</div>

<!-- JavaScript code to make the static HTML "come alive" -->

<script type="text/javascript">

Uize.require (
  [
    'UizeSite.Page.Example.library',
    'UizeSite.Page.Example'
  ],
  function () {(window.page = UizeSite.Page.Example ()).wireUi ()}
);

</script>

</body>
</html>