Documentation / Core

Method: gx

The gx method (and the alias anime) is the main method of the GX framework. It allows to create, pause and resume complex animations.

Usage:

$(something).gx(styles [, duration] [, easing] [, callback]);

Example:

// start animation
$("myEl").gx({width: 300, height: 100}, 2000, 'Bounce', function() { 
	alert('Completed!'); 
});

// pause animation
$("myEl").gx('pause');

// resume animation
$("myEl").gx('resume');

Arguments:

• [object/string] styles: the css properties to animate. The values of the properties will represent the final css values. If you pass a string instead of an object (picked from 'pause' and 'resume'), you'll be able to respectively pause and resume the current animation.
• [int/string] duration: the duration of the animation. Can be either an integer expressed in milliseconds, or a string picked from the following keywords: "verySlow" (4000ms), "slow" (2000ms), "normal" (1000ms), "fast" (500ms), "veryFast" (250ms).
• [string] easing: The Easing Equation (default is 'Linear'). If you include GX.transitions.js you'll be able to use all the GX Transitions (for example Bounce, Elastic and so on..). The easing can be passed in two ways: 'Easing' and 'Easing:Type', where 'Easing' is the easing equation and 'Type' is the easing type (can be 'In', 'Out' and 'InOut'). If you don't specify the type, 'InOut' keyword will be used.
• [function/object] callback: a function that will be executed once the animation is complete. Two arguments are passed in: the element and the instance, for dev purposes. Otherwise, you can pass an object with two properties: 'start' that represents the function which will be executed once the animation starts, and 'complete' that is the same of the callback described above.

Returns:

The object picked up with $ or jQuery.

Notes:

• The CSS properties can be used either in the camelCase and hypen forms. So, you can write, for example, 'fontSize' or 'font-size': it will be the same.
• If you use the pause/resume functionality by passing the strings 'pause' or 'resume', you don't have to pass more arguments.
• As values of your CSS properties, you can either specify an unit or not. If not, the unit specified by the defaultUnit option will be used. For example: '200em' will use em, '200' and 200 will use the defaultUnit value.
• You can create relative animations using the specifiers '+=' and '-=' before the desired value. As said before, you can either specify the unit or not. So: '+=200em' will use em, '-=200' will use the defaultUnit.
• As values of the 'colors' CSS properties, you can use the full exadecimal notation (e.g. '#ff00ff'), the short exadecimal notation (e.g. '#f0f'), an array of three values (e.g. [255, 0, 255]) and the color keywords (e.g. 'blue'). You can add customized color keywords by exteding the Color.customColors wrapper.
• As values of some CSS properties (like width, height and opacity) you can use three special keywords: "show", "hide" and "toggle". Use this only if you need to build a "toggle" animation.

Method: gxInit

The gxInit method allows you to set the defualt GX options.

Usage:

$(something).gxInit(options);

Arguments:

• [object] options: the GX options of the current instance. You could pass the following properties:
• • duration: the default duration (see above for details).
  • queue: The queue type, for interacting with the current instance when multiple calls occur. Can be 'queue' (default value) meaning that multiple calls will be queued and called one after another, 'cancel' meaning that the last call will cancel the previous, or 'wait' meaning that multiple calls will be ignored.
  • defaultUnit: the unit used by GX when no one is specified. By default is 'px'.
  • fps: the frame per second. By default is 50.
  • easing: the easing equation. By default is 'Linear'.
  • delay: the delay of each animation in the queue. You should pass an integer. By default is false (no delay).

Returns:

The object picked up with $ or jQuery.

Documentation / Extra

Method: show

Shows an element

Usage:

$(something).show([arguments]);

Notes:

• If you pass the duration (in every possible form) the element will be shown with an animation. Otherwise it will be shown immediately.

Returns:

The object picked up with $ or jQuery.

Method: hide

Hides an element

Usage:

$(something).hide([arguments]);

Notes:

• If you pass the duration (in every possible form) the element will be hidden with an animation. Otherwise it will be hidden immediately.

Returns:

The object picked up with $ or jQuery.

Method: fadeIn

Fades an element in

Usage:

$(something).fadeIn([arguments]);

Returns:

The object picked up with $ or jQuery.

Method: fadeOut

Fades an element out

Usage:

$(something).fadeOut([arguments]);

Returns:

The object picked up with $ or jQuery.

Method: fadeToggle

Toggles the opacity of an element

Usage:

$(something).fadeToggle([arguments]);

Returns:

The object picked up with $ or jQuery.

Method: fade

Shortcut for fadeIn, fadeOut and fadeToogle

Usage:

$(something).fade(mode, [arguments]);

Arguments:

• [string] mode: the mode type. Can be 'in', 'out' or 'toggle'.
• [array] arguments: an array that contains the arguments you need for the animation.

Returns:

The object picked up with $ or jQuery.

Method: slideIn

Slides an element in

Usage:

$(something).slideIn([arguments]);

Returns:

The object picked up with $ or jQuery.

Method: slideOut

Slides an element out

Usage:

$(something).slideOut([arguments]);

Returns:

The object picked up with $ or jQuery.

Method: slideToggle

Toggles the width or the height of an element

Usage:

$(something).slideToggle([arguments]);

Returns:

The object picked up with $ or jQuery.

Method: slide

Shortcut for slideIn, slideOut and slideToogle

Usage:

$(something).slide(mode, [arguments]);

Arguments:

• [string] mode: the mode type. Can be 'in', 'out' or 'toggle'.
• [array] arguments: an array that contains the arguments you need for the animation. The "mode" argument can be 'vertical' (default) or 'horizontal'.

Returns:

The object picked up with $ or jQuery.

Method: gradient

Changes the bg or the fg color of an element

Usage:

$(something).gradient(color, [arguments]);

Arguments:

• [string] color: the color value.
• [array] arguments: an array that contains the arguments you need for the animation. The "mode" argument can be 'bg' (default) or 'fg'.

Returns:

The object picked up with $ or jQuery.

Method: move

Moves an element

Usage:

$(something).move(x, y, [arguments]);

Arguments:

• [int/string] x: the new value of the "left" css property
• [int/string] y: the new value of the "top" css property
• [array] arguments: an array that contains the arguments you need for the animation.

Returns:

The object picked up with $ or jQuery.

Method: scale

Scales an element

Usage:

$(something).scale(width, height, [arguments]);

Arguments:

• [int/string] width: the new value of the "width" css property
• [int/string] height: the new value of the "height" css property
• [array] arguments: an array that contains the arguments you need for the animation.

Returns:

The object picked up with $ or jQuery.