Effects/Fx.Styles.js

   1 /*
   2 Script: Fx.Styles.js
   3         Contains <Fx.Styles>
   4
   5 License:
   6         MIT-style license.
   7 */
   8
   9 /*
  10 Class: Fx.Styles
  11         Allows you to animate multiple css properties at once; Extends <Fx.Base>, inherits all its properties. Includes colors.
  12         Colors must be in hex format.
  13
  14 Arguments:
  15         el - the $(element) to apply the styles transition to
  16         options - the fx options (see: <Fx.Base>)
  17
  18 Example:
  19         (start code)
  20         var myEffects = new Fx.Styles('myElement', {duration: 1000, transition: Fx.Transitions.linear});
  21
  22         //height from 10 to 100 and width from 900 to 300
  23         myEffects.start({
  24                 'height': [10, 100],
  25                 'width': [900, 300]
  26         });
  27
  28         //or height from current height to 100 and width from current width to 300
  29         myEffects.start({
  30                 'height': 100,
  31                 'width': 300
  32         });
  33         (end)
  34 */
  35
  36 Fx.Styles = Fx.Base.extend({
  37
  38         initialize: function(el, options){
  39                 this.element = $(el);
  40                 this.parent(options);
  41         },
  42
  43         setNow: function(){
  44                 for (var p in this.from) this.now[p] = this.css[p].getNow(this.from[p], this.to[p], this);
  45         },
  46
  47         set: function(to){
  48                 var parsed = {};
  49                 this.css = {};
  50                 for (var p in to){
  51                         this.css[p] = Fx.CSS.select(p, to[p]);
  52                         parsed[p] = this.css[p].parse(to[p]);
  53                 }
  54                 return this.parent(parsed);
  55         },
  56
  57         /*
  58         Property: start
  59                 Executes a transition for any number of css properties in tandem.
  60
  61         Arguments:
  62                 obj - an object containing keys that specify css properties to alter and values that specify either the from/to values (as an array) or just the end value (an integer).
  63
  64         Example:
  65                 see <Fx.Styles>
  66         */
  67
  68         start: function(obj){
  69                 if (this.timer && this.options.wait) return this;
  70                 this.now = {};
  71                 this.css = {};
  72                 var from = {}, to = {};
  73                 for (var p in obj){
  74                         var parsed = Fx.CSS.parse(this.element, p, obj[p]);
  75                         from[p] = parsed.from;
  76                         to[p] = parsed.to;
  77                         this.css[p] = parsed.css;
  78                 }
  79                 return this.parent(from, to);
  80         },
  81
  82         increase: function(){
  83                 for (var p in this.now) this.element.setStyle(p, this.css[p].getValue(this.now[p], this.options.unit, p));
  84         }
  85
  86 });
  87
  88 /*
  89 Class: Element
  90         Custom class to allow all of its methods to be used with any DOM element via the dollar function <$>.
  91 */
  92
  93 Element.extend({
  94
  95         /*
  96         Property: effects
  97                 Applies an <Fx.Styles> to the Element; This a shortcut for <Fx.Styles>.
  98
  99         Example:
 100                 >var myEffects = $(myElement).effects({duration: 1000, transition: Fx.Transitions.Sine.easeInOut});
 101                 >myEffects.start({'height': [10, 100], 'width': [900, 300]});
 102         */
 103
 104         effects: function(options){
 105                 return new Fx.Styles(this, options);
 106         }
 107
 108 });