setInterval/clear Interval animated color change

by jmjpro

HTML

<div id="box"></div>
<span id="box-color"></span>

CSS

#box {
    width: 200px;
    height: 200px;
    background-color: rgb(0, 0, 0);
}

JavaScript

var intervalResult = setInterval(incrementColor, 50);

function incrementColor() {
    var color = $('#box').css('background-color');
    var lastPart = parseInt(getLastPart(color));
    lastPart += 1;
    if (lastPart > 255) {
        clearInterval(intervalResult);
    }
    var newColor = 'rgb(0,0,' + lastPart + ')';
    $('#box-color').text(newColor);
    $('#box').css('background-color', newColor);
}

function getLastPart(rgbColor) {
    var posComma = rgbColor.lastIndexOf(',');
    var posRightParen = rgbColor.lastIndexOf(')');
    return rgbColor.slice(posComma + 2, posRightParen);
}