css3 highlight anim list items

by fiddlegrimbo

HTML

<ul class="list" tabindex="0">
    <li class="highlightable">Click to highlight!</li>
    <li class="highlightable">Click to highlight!</li>
    <li class="highlightable">Click to highlight!</li>
    <li class="highlightable">Click to highlight!</li>
</ul>

CSS

.list {
    border: solid 1px black;
    margin: 0;
    padding: 1em;
}
.list li {
    list-style: none;
}

.highlightable {
    border: solid 2px transparent;
    transition: border 0.5s ease-out;
}

.highlightable.highlight {
    border: solid 2px red;
}

JavaScript

$(document).ready(function() {
    function highlight(el) {
        $('.highlightable').removeClass('highlight');
        $(el).toggleClass('highlight');
    }
    var idx = 0;
    var hl = $('.highlightable');
    highlight(hl.first());
    hl.parent().focus();
    var UP = 38;
    var DOWN = 40;
    $('.list').keydown(function(evt) {
        var i = idx;
        if (UP === evt.keyCode) {
            i--;
        } else if (DOWN === evt.keyCode) {
            i++;
        }
        //console.log("i", i, "idx", idx, "len", hl.length);
        if (i >=0 && i < hl.length) {
            idx = i;
            highlight(hl.eq(idx));
        }
    });
});