Core Docs | Additional Modules Docs

Element.prototype.cssTransition()


@Description: Easily handles a multitude of css transitions for $ elements and sb.elements. This is what most people will probably use for all effects they create.
@File: Element/prototype/cssTransition.js
@Type: constructor
@Example:
sb.include('colors.getTweenColor');
var body = $('body');
var transitions = body.cssTransition([
    
    {
        prop : 'backgroundColor',
        begin : 'FF0000',
        end : '00FF00',
        onEnd : function(){
            //alert('done');
        },
        onTween : function(effect){
            //do something on each tween, this is optional
        }
        
    },
    
    {
        prop : 'fontSize',
        begin : 10,
        change : 40,
        
        duration : 48 //this is optional it defualts to the global duration (constructor's second argument or 24 if not neither is defined)
    }
    
], 120);

transitions.start();

Element.prototype.cssTransition.effects()


@Description: an array of all effects in the cssTransition
@File: Element/prototype/cssTransition.js
@Type: array

Element.prototype.cssTransition.reset()


@Description: reset the transition
@File: Element/prototype/cssTransition.js
@Type: method
@Example:
myTransition.reset();

Element.prototype.cssTransition.restart()


@Description: reset the transition
@File: Element/prototype/cssTransition.js
@Type: method
@Example:
myTransition.restart();

Element.prototype.cssTransition.start()


@Description: starts the transition
@File: Element/prototype/cssTransition.js
@Type: method
@Example:
myTransition.start();

Element.prototype.cssTransition.stop()


@Description: stops the transition
@File: Element/prototype/cssTransition.js
@Type: method
@Example:
myTransition.stop();