transitions for IE9 & older

by thebabydino

HTML

<div class='panel p1' id='p1'></div>
<div class='panel p2' id='p2'></div>

CSS

.panel {
    width: 10em; height: 5em;
    margin: 1em auto;
    background: crimson;
    opacity: 1;
}

JavaScript

var p1 = document.getElementById('p1'), 
    p2 = document.getElementById('p2');

var smooth = function(el, properties, duration){
    for(var p in properties) {
        var start = el.style[p];
        console.log(start);
        console.log(el.style.opacity);
    }
};

p1.addEventListener('click', function(e) {
    smooth(this, {opacity: 0}, 1);
}, false);