Cool Image Fade In-FadeOut

by Annie Lagang

HTML

<div>
    <div id="dimmed"></div>
    <div id="opaque"></div>
</div>

CSS

#dimmed, #opaque {
    width: 600px;
    height: 400px;
}

#dimmed {
    opacity: .4;
    background: url(http://placekitten.com/600/400) top left;
    width: 600px;
    height: 400px;
}

#opaque {
    background: url(http://placekitten.com/600/400) bottom left;
    width: 600px;
    height: 0px;
}

JavaScript

var setProgress = function(progress) {
    // 400 is the "ideal" height of the complete image
    var idealHeight = 400;
    var completeHeight = idealHeight * progress;
    $("#dimmed").height(idealHeight - completeHeight);
    $("#opaque").height(completeHeight);
};

// call setProgress(n); where n is the percent progress from 0 to 1
setProgress(0);


var count = 0,
    direction = 1,
    timeoutFn;
timeoutFn = function() {
    setProgress(count / 400);
    count += direction;

    if (count === 400 || count === 0) {
        direction *= -1;
    }
    setTimeout(timeoutFn, 30);
};
timeoutFn();