Css templates | CssTemplatesWeb

The Yahoo UI library is the reason for most of the cool functions you see on some of Yahoo’s sites, like Flickr and Delicious. It’s still in active development by Yahoo and the community of YUI developers. It offers a lot of functions, Ajax support and animation effects. It’s cross-browser, and it’s packed with rich UI elements, like dialogs, calendars, WYSIWIG editors, sliders and DataTables. Both demos and documentation can be found at

The YUI Animation library

In our example, we’ve put together a few examples on how to use the Yahoo animation library. The first thing we did, was to include the YUI core and the minified version of the YUI animation library. We include these two files directly from Yahoo’s own servers, both to save bandwith, and to let the visitors use the cached version of the files if they’ve already visited a site that’s using these. The code for including the scripts:

 
<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/yahoo-dom-event/yahoo-dom-event.js"></script>

<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/animation/animation-min.js"></script>

Now we have the javascripts we need. Next thing to do is to use them. This block shows you the code for the first example:

<div class="block">
    <h3>Animating a property</h3>                            
    <p>Click the block below to animate the width of the block.</p>
    <div id="demo1"></div>
    <script type="text/javascript">
    YAHOO.util.Event.on('demo1', 'click', function() {
    var anim = new YAHOO.util.Anim(this, { width: { to: 200} });
    anim.animate();
    });
    </script>
</div>

Check all the examples on our demo site: YUI examples
If you want to download the whole example, you can do so here:

  YUI Animation Tutorial (1.9 KiB, 557 hits)