Nightrider

by kthornbloom

HTML

<div class="brands-stage">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>

CSS

.brands-stage {
    white-space:nowrap;
}
.brands-stage div {
    width:50px;
    height:50px;
    background:red;
    margin:2px;
    display:inline-block;
    -webkit-filter: grayscale(1);
    transition:all .2s ease-out;
}

JavaScript

var numBrands = $('.brands-stage div').length,
    speed = 1000,
    interv = numBrands * speed;

function brandColor() {
    $('.brands-stage div').each(function (i) {
        $(this).delay(speed * i).queue(function () {
            $(this).css('webkitFilter', 'grayscale(0)');
            $(this).dequeue();
        });
        $(this).delay(speed).queue(function () {
            $(this).css('webkitFilter', 'grayscale(1)');
            $(this).dequeue();
        });
    });
}

brandColor();
var timer = setInterval(brandColor, interv);