Docs/Fx/Fx.Morph.md

   1 Class: Fx.Morph {#Fx-Morph}
   2 ===========================
   3
   4 Allows for the animation of multiple CSS properties at once, even by a CSS selector. Inherits methods, properties, options and events from [Fx][].
   5
   6 ### Extends:
   7
   8 - [Fx][]
   9
  10 ### Syntax:
  11
  12         var myFx = new Fx.Morph(element[, options]);
  13
  14 ### Arguments:
  15
  16 1. element - (*mixed*) A string ID of the Element or an Element to apply the style transitions to.
  17 2. options - (*object*, optional) The [Fx][] options object.
  18
  19 ### Returns:
  20
  21 * (*object*) A new Fx.Morph instance.
  22
  23 ### Examples:
  24
  25 Multiple styles with start and end values using an object:
  26
  27         var myEffect = new Fx.Morph('myElement', {duration: 'long', transition: Fx.Transitions.Sine.easeOut});
  28
  29         myEffect.start({
  30                 'height': [10, 100], //Morphs the 'height' style from 10px to 100px.
  31                 'width': [900, 300]  //Morphs the 'width' style from 900px to 300px.
  32         });
  33
  34
  35 Multiple styles with the start value omitted will default to the current Element's value:
  36
  37         var myEffect = new Fx.Morph('myElement', {duration: 'short', transition: Fx.Transitions.Sine.easeOut});
  38
  39         myEffect.start({
  40                 'height': 100, //Morphs the height from the current to 100px.
  41                 'width': 300   //Morphs the width from the current to 300px.
  42         });
  43
  44
  45 Morphing one Element to match the CSS values within a CSS class:
  46
  47         var myEffect = new Fx.Morph('myElement', {duration: 1000, transition: Fx.Transitions.Sine.easeOut});
  48
  49         // the styles of myClassName will be applied to the target Element.
  50         myEffect.start('.myClassName');
  51
  52
  53 ### See Also:
  54
  55 - [Fx][]
  56
  57
  58
  59 Fx.Morph Method: set {#Fx-Morph:set}
  60 ------------------------------------
  61
  62 Sets the Element's CSS properties to the specified values immediately.
  63
  64 ### Syntax:
  65
  66         myFx.set(to);
  67
  68 ### Arguments:
  69
  70 1. properties - (*mixed*) Either an *object* of key/value pairs of CSS attributes to change or a *string* representing a CSS selector which can be found within the CSS of the page.  If only one value is given for any CSS property, the transition will be from the current value of that property to the value given.
  71
  72 ### Returns:
  73
  74 * (*object*) This Fx.Morph instance.
  75
  76 ### Examples:
  77
  78         var myFx = new Fx.Morph('myElement').set({
  79                 'height': 200,
  80                 'width': 200,
  81                 'background-color': '#f00',
  82                 'opacity': 0
  83         });
  84         var myFx = new Fx.Morph('myElement').set('.myClass');
  85
  86
  87
  88 Fx.Morph Method: start {#Fx-Morph:start}
  89 ----------------------------------------
  90
  91 Executes a transition for any number of CSS properties in tandem.
  92
  93 ### Syntax:
  94
  95         myFx.start(properties);
  96
  97 ### Arguments:
  98
  99 1. properties - (*mixed*) An *object* of key/value pairs of CSS attributes to change or a *string* representing a CSS selector which can be found within the CSS of the page.
 100         If only one value is given for any CSS property, the transition will be from the current value of that property to the value given.
 101
 102 ### Returns:
 103
 104 * (*object*) This Fx.Morph instance.
 105
 106 ### Examples:
 107
 108         var myEffects = new Fx.Morph('myElement', {duration: 1000, transition: Fx.Transitions.Sine.easeOut});
 109
 110         myEffects.start({
 111                 'height': [10, 100],
 112                 'width': [900, 300],
 113                 'opacity': 0,
 114                 'background-color': '#00f'
 115         });
 116
 117 ### Notes:
 118
 119 - If a string is passed as the CSS selector, the selector must be identical to the one within the CSS.
 120 - Multiple selectors (with commas) are not supported.
 121
 122
 123 Object: Element.Properties {#Element-Properties}
 124 ==============================================
 125
 126 see [Element.Properties][]
 127
 128 Element Property: morph {#Element-Properties:morph}
 129 ---------------------------------------------------
 130
 131 ### Setter
 132
 133 Sets a default Fx.Morph instance for an Element.
 134
 135 #### Syntax:
 136
 137         el.set('morph'[, options]);
 138
 139 #### Arguments:
 140
 141 1. options - (*object*, optional) The Fx.Morph options.
 142
 143 #### Returns:
 144
 145 * (*element*) This Element.
 146
 147 #### Examples:
 148
 149         el.set('morph', {duration: 'long', transition: 'bounce:out'});
 150         el.morph({height: 100, width: 100});
 151
 152 ### Getter
 153
 154 Gets the default Fx.Morph instance for the Element.
 155
 156 #### Syntax:
 157
 158         el.get('morph');
 159
 160 #### Arguments:
 161
 162 1. property - (*string*) the Fx.Morph property argument.
 163
 164 #### Returns:
 165
 166 * (*object*) The Fx.Morph instance.
 167
 168 #### Examples:
 169
 170         el.set('morph', {duration: 'long', transition: 'bounce:out'});
 171         el.morph({height: 100, width: 100});
 172         el.get('morph'); // the Fx.Morph instance.
 173
 174
 175
 176 Type: Element {#Element}
 177 ==========================
 178
 179 Element Method: morph {#Element:morph}
 180 --------------------------------------
 181
 182 Animates an Element given the properties passed in.
 183
 184 ### Syntax:
 185
 186         myElement.morph(properties);
 187
 188 ### Arguments:
 189
 190 1. properties - (*mixed*) The CSS properties to animate. Can be either an object of CSS properties or a string representing a CSS selector.  If only one value is given for any CSS property, the transition will be from the current value of that property to the value given.
 191
 192 ### Returns:
 193
 194 * (*element*) This Element.
 195
 196 ### Example:
 197
 198 With an object:
 199
 200         $('myElement').morph({height: 100, width: 200});
 201
 202 With a selector:
 203
 204         $('myElement').morph('.class1');
 205
 206 ### See Also:
 207
 208 - [Fx.Morph][]
 209
 210
 211
 212 [$]: /core/Element/Element#Window:dollar
 213 [Fx]: /core/Fx/Fx
 214 [Fx.Morph]: #Fx-Morph
 215 [Element.Properties]: /core/Element/Element/#Element-Properties