@File: /surebert/effect.js

@Version: v3.11

@Description: If you are going to be using color effects make sure to include sb.colors.js by adding a script tag or using sb.include('colors'); or adding it to your surebert cache

sb.effect

@File: /surebert/effect.js

@Type: constructor

@Description: Used to create time based style effects

@Example:

 

//set the DOM el we want to work with

var myDiv = $('#accord');

//create an custom effect

var myEffect = new sb.effect({

    el : myDiv,

    begin : 10,

    change : 12,

    duration : 120,

    onChange : function(c){

        this.el.style.fontSize = this.value+'px';

    },

    onEnd : function(){

        //do something

    },

    onStop : function(){

        //do soemthing

    }

});

myEffect.start();

sb.effect.count

@File: /surebert/effect.js

@Type: integer

@Description: The number of times the effect has iterated so far between begin and end. You have reference to this in your effect onChange as this.count

sb.effect.duration

@File: /surebert/effect.js

@Type: integer

@Description: The duration of teh effect from begin to end. Default is 24. Lower numbers are faster, higher numbers are slower.

sb.effect.prototype

@File: /surebert/effect.js

@Type: prototype

@Description: prototype methods and properties for a sb.effect instance

sb.effect.reset()

@File: /surebert/effect.js

@Type: method

@Description: reset the effect to count and time to 0 and resets value and valueRounded to this.begin an. Also fires the effects onReset method if you have pecified one

@Example:


    myEffect.reset();

sb.effect.restart()

@File: /surebert/effect.js

@Type: method

@Description: restarts the effect. run this.reset() and this.start()

@Example:


    myEffect.restart();

sb.effect.setParams()

@File: /surebert/effect.js

@Type: method

@Description: applies properties from an additional params object with the same structure as the one used in the constructor

@Example:


    myEffect.setParams();

sb.effect.start()

@File: /surebert/effect.js

@Type: method

@Description: starts the effect to run the effect

@Example:


    myEffect.start();

sb.effect.stop()

@File: /surebert/effect.js

@Type: method

@Description: stops the effect from running. Also fires the effects onStop method if you have specified one

@Example:


    myEffect.stop();

sb.effect.tween

@File: /surebert/effect.js

@Type: string

@Description: The type of tweening used, see sb.tween

sb.effects

@File: /surebert/effect.js

@Type: object

@Description: A reference to all effects registered ont he page

sb.startAll()

@File: /surebert/effect.js

@Type: method

@Description: Starts all the effects on the page

sb.stopAll()

@File: /surebert/effect.js

@Type: method

@Description: Stops all the effects on the page

surebert.effects.infuse

@File: /surebert/effect.js

@Type: method

@Example:


    var myValue = sb.effects.tween.infuse({

        inOutCirc : function(t,b,c,d) {

            if ((t/=d/2) < 1){

                return c/2 * (1-Math.sqrt(1-t*t))+b;

            }

            return c/2 * (Math.sqrt(1- (t-=2)*t)+1) +b;

        }

    });

surebert.effects.tween

@File: /surebert/effect.js

@Type: object

@Description: If you are going to be using color effects make sure to include sb.colors.js by adding a script tag or using sb.include('colors.getTweenColor'); or adding it to your surebert cache .Tweens Math adapted from http://www.synthesisters.com/hypermail/max-msp/Nov05/34305.html

surebert.effects.tween.inCirc

@File: /surebert/effect.js

@Type: method