Random element highlighting

by Jeremy Bolanos

HTML

<span class="test">highight my text </span><span class="test">highight my text </span><span class="test">highight my text </span><span class="test">highight my text </span><span class="test">highight my text </span><span class="test">highight my text </span><span class="test">highight my text </span><span class="test">highight my text </span><span class="test">highight my text </span><span class="test">highight my text </span><span class="test">highight my text </span><span class="test">highight my text </span><span class="test">highight my text </span><span class="test">highight my text </span><span class="test">highight my text </span><span class="test">highight my text </span><span class="test">highight my text </span><span class="test">highight my text </span><span class="test">highight my text </span><span class="test">highight my text </span><span class="test">highight my text </span><span class="test">highight my text </span><span class="test">highight my text </span><span class="test">highight my text </span><span class="test">highight my text </span><span class="test">highight my text </span><span class="test">highight my text </span><span class="test">highight my text </span><span class="test">highight my text </span><span class="test">highight my text </span><span class="test">highight my text </span><span class="test">highight my text </span><span class="test">highight my text </span><span class="test">highight my text </span><span class="test">highight my text </span><span class="test">highight my text </span><span class="test">highight my text </span><span class="test">highight my text </span><span class="test">highight my text </span><span class="test">highight my text </span><span class="test">highight my text </span><span class="test">highight my text </span><span class="test">highight my text </span><span class="test">highight my text </span><span class="test">highight my text </span><span class="test">highight my text </span><span...

CSS

.test {
    display: inline-block;
    margin: 0 5px;
    color: rgba(0, 0, 0, 0.3);
    transition: color 0.8s ease;
}

JavaScript

function testHighlight() {
    $('.test').css('color', 'rgba(0, 0, 0, 0.3)');
    var thisVal = Math.floor( (Math.random() * $('.test').length) + 1);
    $('.test:nth-child('+thisVal+')').css('color', 'rgba(0, 0, 0, 0.8)');
}

setInterval(function(){testHighlight();}, 900);