transitionTo

gistfile1.txt

HTMLImageElement.prototype.transitionTo = function(newSrc, duration, cb){
        var original = this;
        var clone = original.cloneNode(true, true);
        var opacity = function (el, opacity) {
            el.style.filter = 'alpha(opacity=' + Math.round(opacity * 100) + ')';
            el.style.opacity = opacity;
        };
        clone.style.width = original.clientWidth+'px';
        clone.style.position = 'absolute';
        clone.src = original.src;
        opacity(clone, 1.0);
    
        original.parentNode.insertBefore(clone, original);
        original.src = newSrc;
        opacity(original, 0.0);
    
        var step = Math.ceil(duration / 50);
        var gradient = 0.02;
        (function crossFade(fadeIn, fadeOut) {
            var outOp = parseFloat(fadeOut.style.opacity);
            var inOp = parseFloat(fadeIn.style.opacity);
            if (outOp < gradient) {
                clone.parentNode.removeChild(clone);
                opacity(original, 1.0)
                if( typeof cb == "function")cb();
                return;
            }
            opacity(fadeIn, inOp + gradient);
            opacity(fadeOut, outOp - gradient);
            setTimeout(function () {
                crossFade(fadeIn, fadeOut);
            }, step);
        }(original, clone));
    }