JavaScript slidedown without jQuery

Question

I wish to have a similar effect to jQuery slidedown but without using jQuery or any other libary. I know it's "possible" as anything in jQuery can be done in plain JavaScript. Just harder.

I cannot use jQuery as everything has to be written in my own code without any libaries used.

Has anyone done something like this or any effects just using plain JavaScript?

Answer 1

Have a look at the jQuery source for that effect (slideDown calls show).

Answer 2

can be done in plain JavaScript. Just harder.

Actually it's not too hard. You just need to get comfortable with setTimeout() (which is a good idea anyway since it teaches you the programming style of node.js). The most bare-bones implementation (does not have all of jQuery's features, that's left as homework for the reader):

function slideDown (element, duration, finalheight, callback) {
    var s = element.style;
    s.height = '0px';

    var y = 0;
    var framerate = 10;
    var one_second = 1000;
    var interval = one_second*duration/framerate;
    var totalframes = one_second*duration/interval;
    var heightincrement = finalheight/totalframes;
    var tween = function () {
        y += heightincrement;
        s.height = y+'px';
        if (y<finalheight) {
            setTimeout(tween,interval);
        }
    }
    tween();
}

Of course, that's not the shortest possible way to write it and you don't have to declare all those variables like one_second etc. I just did it this way for clarity to show what's going on.

This example is also shorter and easier to understand than trying to read jQuery's source code.

---

Has anyone done something like this or any effects just using plain JavaScript?

Oh yeah, sure, it's the sort of thing I do for fun on weekends:

• http://slebetman.110mb.com/tank3.html (hint: units are clickable)
• http://slebetman.110mb.com/jsgames/freakout

Answer 3

Here's the code which I wrote it from scratch, This is purely time based. Tell you what I felt difficulty in writing this code, 'cause coding with jQuery for a long made me forgot how to code in pure javascript, finally I'm done ^^

var minheight = 20;
var maxheight = 100;
var time = 1000;
var timer = null;
var toggled = false;

window.onload = function() {
    var controler = document.getElementById('slide');
    var slider = document.getElementById('slider');
    slider.style.height = minheight + 'px'; //not so imp,just for my example
    controler.onclick = function() {  
        clearInterval(timer);
        var instanceheight = parseInt(slider.style.height);  // Current height
        var init = (new Date()).getTime(); //start time
        var height = (toggled = !toggled) ? maxheight: minheight; //if toggled

        var disp = height - parseInt(slider.style.height);
        timer = setInterval(function() {
            var instance = (new Date()).getTime() - init; //animating time
            if(instance <= time ) { //0 -> time seconds
                var pos = instanceheight + Math.floor(disp * instance / time);
                slider.style.height =  pos + 'px';
            }else {
                slider.style.height = height + 'px'; //safety side ^^
                clearInterval(timer);
            }
        },1);
    };
};

Test it here : http://jsbin.com/azewi5