Jquery - Animate Backgroundcolor, Depending On Width Percentage

I'm in the process of constructing rank/score bars for my device spec pages, and I have a basic animation using transition and animation together, but the end result isn't quite wh

Solution 1:

If I understand correctly, you just want to animate colors based on what percent you're at when animating. Is this correct?

If so, and based on what you've provided with your example, I'd recommend looking into jQuery's animate function and using the step callback to check every step of the way in the animation.

Here is what I've experimented with so far with both css and jquery combined. I'd love to see a full css example!

The jQuery

// wrap this in an anonymous to help namespace collisions// and to help with faster variable lookup.
;(function (document, $) {

    $(document).ready(function () {
        $('.rating-bar').each(function () {
            var _this = $(this),
                size = _this.data('size');

            _this.animate({
                width: size + '%'
            }, {
                duration: 2500,
                step: function (progress) {
                    _this.css({
                        backgroundColor: progressColor(progress)
                    });
                }
            });
        });
    });

    functionprogressColor(progress) {
        if (progress >= 0 && progress <= 24) return'#a41818';
        elseif (progress >= 25 && progress <= 49) return'#87581c';
        elseif (progress >= 50 && progress <= 74) return'#997815';
        elseif (progress >= 75 && progress <= 89) return'#659a1f';
        elseif (progress >= 90 && progress <= 100) return'#659a1f';
    }
})(document, jQuery);

The updated css

#rank-bar {
    margin: 1em02em0;
}
#rank-bar-score {
    display: inline-block;
}
#ranks-js {
    margin-bottom: 1.5em;
}
.rating-bar {
    width: 0;
    line-height: 2;
    background-color: #1a1a1a;
    outline: none;
    -moz-border-radius: 2px002px;
    -webkit-border-radius: 2px002px;
    border-radius: 2px002px;
    -moz-transition: background-color 0.5s linear 0s;
    -webkit-transition: background-color 0.5s linear 0s;
    transition: background-color 0.5s linear 0s;
}
.rating-bar-bg {
    width: auto;
    background-color: #1a1a1a;
    margin: 0.5em001em;
    border: 1px solid #090909;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
}
.rating-bar-bg-overall {
    width: auto;
    background-color: #1a1a1a;
    margin: 0.5em0;
    border: 1px solid #090909;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
}
.rb-label {
    width: 10em;
    max-width: 350px;
    display: block;
    color: #ebebeb;
    font-weight: bold;
    text-shadow: 2px1px0#222222;
    text-transform: uppercase;
    margin-left: 0.5em;
}
#overall {
    font-size: 1.25em;
}

JSFiddle

EDIT: I've added the updated css from the fiddle.

EDIT 2: For a simple example, see this JSFiddle.

Solution 2:

Another way to solve it.

The animation done with CSS, and scripting just to handle when to stop.

script

var intervalFunc;
var containerWidth;
var stopAt;

$(document).ready(function() {


$("#run").click(function() {
    containerWidth = $("#container").width();
    entered = $("#value").val();
    stopAt = containerWidth * entered / 100; 
    $("#test").removeClass ("animated");
    intervalFunc = setInterval (Stop, 10);
    setTimeout (Start, 10);
});

})

functionStart () {
    $("#test").addClass ("animated");
    $("#test").removeAttr("style");

}

functionStop () {
    var elem = document.getElementById('test');
    var style = window.getComputedStyle (elem, null);
    var frame = style.getPropertyValue("width");
    var width = parseInt(frame,10);
    if (width > stopAt) {
        elem.style.webkitAnimationPlayState = "paused";
        clearInterval (intervalFunc);
    }
}

CSS

#container {
    position: absolute;
    height: 50px;
    width: 300px;
    border: solid 1px black;
    display: block;
    top: 40px;
}

#test {
    position: absolute;
    height: 100%;
    width: 0px;
    display: block;
    top: 0px;
    left: 0px;
}

.animated {
    -webkit-animation-name: colors;
    -webkit-animation-duration: 4s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
}

#run {
    width: 40px;
    height: 25px;
}

@-webkit-keyframes colors
{
    0% {width: 0%; background-color: red;}
   30% {           background-color: red;}
   50% {           background-color: yellow;}
  100% {width: 100%; background-color: green;}
}

demo

In the demo, enter the percentage of the bar, and press run.

Only webkit animations, but should be easily extended to other browsers.

The color stops are only aproximate, but again can be easily modified.