YUI Library JavaScript DHTML


            



    
Animating multiple elements with StyleSheet

/*margin and padding on body element
  can introduce errors in determining
  element position and are not recommended;
  we turn them off as a foundation for YUI
  CSS treatments. */
body {
  margin:0;
  padding:0;
}







    .shrinky_dink {
        overflow: hidden;
        width: 450px;
    }
    .shrinky_dink div {
        display: inline;
        float: left;
        background: #000;
        margin: 1em;
        height: 150px;
        width: 150px;
        opacity: 1,
        filter: alpha(opacity=100);
    }




Animating multiple elements with StyleSheet


  In this example, we'll use the Animation Utility in concert with StyleSheet to apply style changes to a group of elements in concert over time.




    
        Start



YAHOO.util.Event.onDOMReady(function () {
        // Default animation duration is 1 second
    var anim  = new YAHOO.util.Anim(),
        // Modify the existing style node's stylesheet
        sheet = new YAHOO.util.StyleSheet('demo_style'),
        floor = Math.floor,
        go    = YAHOO.util.Dom.get('demo_go');
    // Update the StyleSheet on each frame of the animation
    anim.onTween.subscribe(function (type,data) {
        var factor  = data[0].duration / 1000,
            dim     = (150 - floor(100 * factor)) + 'px',
            opacity = 1 - (0.8 * factor);
        sheet.set('.shrinky_dink div', {
            height : dim,
            width  : dim,
            opacity: opacity
        });
    });
    anim.onComplete.subscribe(function () {
        go.disabled = false;
    });
    YAHOO.util.Event.on(go, 'click', function () {
        go.disabled = true;
        anim.animate();
    });
});





   
   
yui_2.7.0b.zip( 4,431 k)