vegUI.org home of the javascript based window manager and AJAX framework

vegUISiteKit - Effect: Morph

written by vegu on 16 Mar, 2007 11:02:46
The morph effect - odd name i agree, must have been late when i named it - allows you to grow,shrink or move a node in a smooth animation. This is cool for popup effects or collapsing and expanding of elements.

As soon as the morph effect library is included the method fx_morph() is added to the VSK_Node object.

The first two arguments of the method define the size that the node will morph to in the time of the effect - width and height respectivly. Argument 3 and 4 are the coordinates that the node should move to in the time of the effect - x and y respectively and the last argument is the time of the effect (ms).

Examples:
code: js
/* take control over some HTML node and set its size to 50,50 */
var n = v(myNode).resize(50,50);

/* only grow the node to 100x100 size, dont move it */
n.fx_morph(100,100,null,null,1000);

/* or, move the node, note that i am submitting the current width
* and height to the function, that causes the node to stay the
* same size
*/


n.fx_morph(n.w(), n.h(),100,100,1000);

/* or move and resize the node */

n.fx_morph(100,100,100,100,1000);

Currently the only way to keep the node from resizing is the submit the node's current width and height to the function. I will most likely make it so you can submit null as well in order to omit the resizing part as i did with the movement part.

Related Posts

  • No related posts



Your Comment

name:*
email-address:

Are you human?



Comments to this post: (1)

RSS Feed for comments RSS Feed for comments
yuhma
on 18 Sep, 2008 - 17:59:31

I am trying to use your Morph effect. I copied your example to see the morphing div, but I also want the contents of that div to blow up... is this possible? As of now, the empty div is blowing up and when I type something inside of it, it is set to the side while the exploding div remains empty. Would I be able to implement a whole new page blowing uip and down when clicking? Thank you in advance.

Report this comment