AJS gets effects

Effects are implemented in 100 lines of code and following is included:

• AJS.fx.highlight: Yellow-fade highlight an element
• AJS.fx.fadeIn: Fade an element in
• AJS.fx.fadeOut: Fade an element out
• AJS.fx.setWidth: Expand the width of an element (using animation)
• AJS.fx.setHeight: Expand the height of an element (using animation)

It's super easy to build new effects!

Demo

Check out the demo online!

This code expand the width and height of a layer and end with a cinematic highlight (hehe)

var div = AJS.$('div');
AJS.fx.setHeight(div, {
    to: 500,
    onComplete: function() { 
        AJS.fx.setWidth(div, {
        to: 600,
        duration: 1000,
        onComplete: function() {
            AJS.fx.highlight(div);
        }});
    }});