Toggle class on HTML element without jQuery

Question

I have a section on my website which holds all the content, but I want a \"sidebar\" with hidden content to smoothly appear from the left at the push of an external button.<

Answer 1

function init() {

    animateCSS(document.getElementById("slide"), 250, {
        left: function (timePercent, frame) {

            var endPoint = 128,
                startPoint = 0,
                pathLength = endPoint - startPoint,
                base = 64,                          //slope of the curve
                currentPos = Math.floor(startPoint + (Math.pow(base, timePercent) - 1) / (base - 1) * pathLength);

            return currentPos + "px";
        }
    }, function (element) {
        element.style.left = "128px";
    });

};
var JobType = function () {
    if (!(this instanceof JobType)) {
        return new JobType(arguments[0]);
    };
    var arg = arguments[0];
    this.fn = arg["fn"];
    this.delay = arg["delay"];
    this.startTime = arg["startTime"];
    this.comment = arg["comment"];
    this.elapsed = 0;
};
function JobManager() {
    if (!(this instanceof JobManager)) {
        return new JobManager();
    };
    var instance;
    JobManager = function () {
        return instance;
    };
    JobManager.prototype = this;
    instance = new JobManager();
    instance.constructor = JobManager;
    var jobQueue = [];
    var startedFlag = false;
    var inProcess = false;
    var currentJob = null;
    var timerID = -1;
    var start = function () {
        if (jobQueue.length) {
            startedFlag = true;
            currentJob = jobQueue.shift();
            var startOver = currentJob.delay - ((new Date()).getTime() - currentJob.startTime);
            timerID = setTimeout(function () {
                inProcess = true;
                currentJob.fn();
                if (jobQueue.length) {
                    try {
                        while ((jobQueue[0].delay - ((new Date()).getTime() - currentJob.startTime)) <= 0) {
                            currentJob = jobQueue.shift();
                            currentJob.fn();
                        };
                    }
                    catch (e) { };
                }
                inProcess = false;
                start();
            }, (startOver > 0 ? startOver : 0));
        }
        else {
            startedFlag = false;
            timerID = -1;
        };
    };
    instance.add = function (newJob) {
        if (newJob instanceof JobType) {
            stopCurrent();
            var jobQueueLength = jobQueue.length;
            if (!jobQueueLength) {

                jobQueue.push(newJob);
            }
            else {
                var currentTime = (new Date()).getTime(),
                    insertedFlag = false;
                for (var i = 0; i < jobQueueLength; i++) {
                    var tempJob = jobQueue[i],
                        tempJobElapsed = currentTime - tempJob["startTime"],
                        tempJobDelay = tempJob["delay"] - tempJobElapsed;
                    tempJob["elapsed"] = tempJobElapsed;
                    if (newJob["delay"] <= tempJobDelay) {
                        if (!insertedFlag) {
                            jobQueue.splice(i, 0, newJob);
                            insertedFlag = true;
                        }
                    };
                    if (i === (jobQueueLength - 1)) {
                        if (!insertedFlag) {
                            jobQueue.push(newJob);
                            insertedFlag = true;
                        }
                    }
                };
            };
            if ((!startedFlag) && (!inProcess)) {
                start();
            };
            return true;
        }
        else {
            return false;
        };
    };
    var stopCurrent = function () {
        if (timerID >= 0) {
            if (!inProcess) {
                clearTimeout(timerID);
                timerID = -1;
                if (currentJob) {
                    jobQueue.unshift(currentJob);
                };
            };
            startedFlag = false;
        };
    };
    return instance;
};
function animateCSS(element, duration, animation, whendone) {
    var frame = 0,
        elapsedTime = 0,
        timePercent = 0,
        startTime = new Date().getTime(),
        endTime = startTime + duration,
        fps = 0,
        averageRenderTime = 1000,
        normalRenderTime = 1000 / 25,
        myJobManager = JobManager();
    var inQueue = myJobManager.add(JobType({
        "fn": displayNextFrame,
        "delay": 0,
        "startTime": (new Date).getTime(),
        "comment": "start new animation"
    }));
    function playFrame() {
        for (var cssprop in animation) {
            try {
                element.style[cssprop] = animation[cssprop].call(element, timePercent, frame);
            } catch (e) { }
        };
    };
    function displayNextFrame() {
        elapsedTime = (new Date().getTime()) - startTime;
        timePercent = elapsedTime / duration;
        if (elapsedTime >= duration) {
            playFrame();
            if (whendone) {
                whendone(element);
            };
            return;
        };

        playFrame();
        frame++;
        averageRenderTime = elapsedTime / frame;
        fps = 1000 / averageRenderTime;
        inQueue = myJobManager.add(JobType({
            "fn": displayNextFrame,
            "delay": (fps < 15 ? 0 : normalRenderTime - averageRenderTime),
            "startTime": (new Date).getTime(),
            "comment": frame
        }));
    }
};
(function () {
    if (this.addEventListener) {
        this.addEventListener("load", init, false)
    }
    else {
        window.onload = init;
    }
}());