Overview | File | Class | Tree | Index | Help
PREV NEXT | FRAMES NO FRAMES

## animationExtensions.js

#### Summary

No overview generated for 'animationExtensions.js'

    /**
     * To scroll the height from a elemnt from one value to an other.
     * Without parameters the function will first check if the element has a height.
     * If so, it will scroll the elemnent to 0px height, otherwise from 0px to the scrollHeight.
     * @param from optional
     * @param to optional
     */
    HTMLElement.prototype.animateHeight=function(from, to)
    {
      if(!window['Animation']) return;
      if(!this._animation_height)
      {
        this._animation_height=this.createAnimation();
        this.style.height=from||'0px';
        this._animation_height.accelerationProfile=this._animation_height.sine;
      };

      if(from)
      {
        this._animation_height.addAnimation('height', from, (to?to:this.scrollHeight+'px')).run();
      }
      else
      {
        if(this.style.height=='0px')
        {
          this._animation_height.addAnimation('height', '0px', (to?to:this.scrollHeight+'px')).run();
        }
        else
        {
          this._animation_height.addAnimation('height', this.style.height, '0px').run();
        }
      }
    }
    /**
     * To scroll the width from a elemnt from one value to an other.
     * Without parameters the function will first check if the element has a width.
     * If so, it will scroll the elemnent to 0px width, otherwise from 0px to the scrollWidth.
     * @param from optional
     * @param to optional
     */
    HTMLElement.prototype.animateWidth=function(from, to)
    {
      if(!window['Animation']) return;
      if(!this._animation_width)
      {
        this._animation_width=this.createAnimation();
        this.style.width=from||'0px';
        this._animation_width.accelerationProfile=this._animation_width.sine;
      };

      if(from)
      {
        this._animation_width.addAnimation('width', from, (to?to:this.scrollWidth+'px')).run();
      }
      else
      {
        if(this.style.width=='0px')
        {
          this._animation_width.addAnimation('width', '0px', (to?to:this.scrollWidth+'px')).run();
        }
        else
        {
          this._animation_width.addAnimation('width', this.style.width, '0px').run();
        }
      }
    }
    /**
      * To scroll the height and the width from a elemnt from one value to an other.
      * Without parameters the function will first check if the element has a height.
      * If so, it will scroll the elemnent to 0px height, otherwise from 0px to the scrollHeight.
      * The same goes for width.
      * @param heigtFrom optional
      * @param heigtTo optional
      * @param widthFrom optional
      * @param widthTo optional
     */
    HTMLElement.prototype.animateHeightAndWidth=function(heightFrom, heightTo, widthFrom, widthTo)
    {
      if(!window['Animation']) return;
      if(!this._animation_height_width)
      {
        this._animation_height_width=this.createAnimation();
        this.style.height=heightFrom||'0px';
        this.style.width=widthFrom||'0px';
        this._animation_height_width.accelerationProfile=this._animation_height_width.sine;
      };
      if(heightFrom || widthFrom)
      {
        this._animation_height_width.
          addAnimation('height', heightFrom?heightFrom:this.style.height, (heightTo?heightTo:this.scrollHeight+'px')).
          addAnimation('width', widthFrom?widthFrom:this.style.width, (widthTo?widthTo:this.scrollWidth+'px')).
          run();
      }
      else
      {
        if(this.style.height=='0px')
        {
        this._animation_height_width.
          addAnimation('height', '0px', (heightTo?heightTo:this.scrollHeight+'px')).
          addAnimation('width', '0px', (widthTo?widthTo:this.scrollWidth+'px')).
          run();
        }
        else
        {
        this._animation_height_width.
          addAnimation('height', this.style.height, '0px').
          addAnimation('width', this.style.width, '0px').
          run();
        }
      }
    }
    /**
     * To fade a element from one value to an other.
     * @param from optional
     * @param to optional
     */
    HTMLElement.prototype.fade=function(from, to, speed)
    {
      if(!window['Animation']) return;
      if(!this._animation_fade)
      {
        this._animation_fade=this.createAnimation();
        this._animation_fade.speed=speed||20;
        this.style.opacity=from||0;
        this._animation_fade.accelerationProfile=this._animation_fade.accelerate;
      }
      this._animation_fade.addAnimation('opacity', from?from:this.style.opacity, to?to:1).run();
    }
    /**
     * To fade the background color from a element from one value to an other.
     * @param from optional
     * @param to optional
     */
    HTMLElement.prototype.fadeColor=function(from, to, speed)
    {
      if(!window['Animation']) return;
      if(!this._animation_fade_color)
      {
        this._animation_fade_color=this.createAnimation();
        this._animation_fade_color.speed=speed||20;
        this.style.backgroundColor=from||'#00f';
        this._animation_fade_color.accelerationProfile=this._animation_fade_color.accelerate;
      }
      this._animation_fade_color.addAnimation('backgroundColor', from?from:this.style.backgroundColor, to?to:'#fff').run();
    }

Overview | File | Class | Tree | Index | Help
PREV NEXT | FRAMES NO FRAMES

Documentation generated by JSDoc on Wed Jan 25 16:35:21 2006