Fade Without Jquery

I'm using this function to open and close elements onclick. How can I add some fade effect without using jQuery? function toggle_visibility(){ for(var i = 0,len = arguments.lengt

Solution 1:

You can use css3 transition and opacity to do this

#block {
    transition: opacity 1s ease-in-out;
}

.out { opacity: 0; }
.in { opacity: 1; }

then use out or in class to hide or show the element

Solution 2:

You can write your own function like this:

var toggleFade = function(element, time, callback) {
    var timeStep = 50;
    var step = timeStep / time;
    var toValue = 1;
    if (element.style.display != 'none') {
        step = -step;
        toValue = 0;
        element.style.opacity = element.style.opacity || 1;        
    } else {
        element.style.opacity = element.style.opacity || 0;  
        element.style.display = 'block';        
    }

    var interval = setInterval(function() {
        var newVal = +element.style.opacity + step;

        if (newVal < 0 && step < 0) {
            clearInterval(interval);
            element.style.opacity = 0;
            element.style.display = 'none'
            callback && callback();
        } elseif (newVal > 1 && step > 0) {
            clearInterval(interval);
            element.style.opacity = 1;
            callback && callback();
        } else
            element.style.opacity = newVal;
    }, timeStep);
}

Demo