Fx on Javascript: How to fade stuff, etc without frameworks?

Question

Hi,

I would like to learn how to do fade, and similar effects on Javascript. I often get answers, like why not use Jquery, mootools, etc ? Well, I want to learn how stuff works, then I wont mind using any of these frameworks.

I'm currently learning about making changes on the DOM, so, I've read a lot of stuff on this theme. Also, I've read about Reflow, still, I didnt find any cool stuff on Repaint, but, I'll keep searching.

From seeing source files etc, I see a few methods, that I dont know if they've created or are Core methods of JS.

My question is, is there any resource where I can learn all this neat stuff like smooth position change, fading elements trough opacity or whatever, etc ?

Thanks for your atention and knowledge!

Have a nice day ;)

Answer 1

Fading using javascript is basically modifying opacity of an element programmatically. The "smoothness" is done by using timers. Same for position/size changes. You need to read up on css to understand what style properties of an element you have to control using javascript for the effect you want.

If you are really curious, you can dive into the source of yui in github: http://github.com/yui

Answer 2

You could start here, with a tutorial. There are two more tutorials linked to it.

Answer 3

here's an example that works in firefox and chrome. ie doesn't respect the opacity style.

    var ELEMENT;
    var STEPS;
    var INTERVAL;
    var COUNT;
    var TIMERID;

    // 5 * 200ms = 1 second
    STEPS = 5;
    INTERVAL = 200;

    function Button1_onclick() {

        ELEMENT = document.getElementById("foo");
        COUNT = STEPS - 1;
        TIMERID = setInterval(Fade, INTERVAL);
    }

    function Fade() {

        ELEMENT.style.opacity = String(COUNT / STEPS);
        COUNT--;

        if (COUNT < 0) {
            clearInterval(TIMERID);
            TIMERID = 0;
        }
    }

setInterval and clearInterval are standard js functions. they will execute the given function every x milliseconds. in our case we kill it when we've hit 0 opacity.

sliding a window is a similar process. you'd set the left/right/top/bottom style instead of opacity.

Answer 4

Take a look at emile.js. It's brand-spanking new. Great way to learn how to do your own.

Introduced at the recent jsconf conference. Written by Thomas Fuchs (script.aculo.us).

http://github.com/madrobby/emile

Émile Stand-alone CSS animation

JavaScript mini-framework

Doesn't need a JavaScript framework

Full set of CSS properties for animation (length-based and colors)

Easing and callbacks

Less than 50 lines of code

Get updates on Twitter: http://twitter.com/emilejs