AJS gets effects

I have today ported moo.fx to AJS. The code is super clean and quite useful - one can now use dazzling 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);
        }});
    }});
Announcements · JavaScript • 22. Nov 2006
7 comments so far

Amir,
I just checked your AJS_fx. It's pretty cool how you intergrated it.
I saw a pretty cool effect on Moo.fx (http://moofx.mad4milk.net/) where you can drag the ball and then upon release it bounces back and forth.

It would be great if you could integrate something like that!

:-)
Arthur

Congratulations for your work. Its realy a good job.
And thanks for shared..... ;-)

good, and very excellent

very good friend
kakaroto

Thanks for your work!
is there any fix for the fade in problem that happens in IE that makes white pixels appear?

ok, I'll answer myself, and anyone who's having the same issue.

Best practice to solve this problem seems to be disabling of AJS_fx.js on IE, you can easily do this by using [if !IE] as shown