Jquery hilight one at a time

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/themes/ui-lightness/jquery-ui.css">
<div class="l" id="l1" style="float: left;"><br><br>01</div>
<div class="l" id="l2"  style="float: left;"><br><br>02</div>
<div class="l" id="l3"  style="float: left;"><br><br>03</div>
    <div style="clear: both;"></div>
<div class="l" id="l4"  style="float: left;"><br><br>04</div>
<div class="l" id="l5"  style="float: left;"><br><br>05</div>
<div class="l" id="l6"  style="float: left;"><br><br>06</div>
        <div style="clear: both;"></div>
<div class="l" id="l7"  style="float: left;"><br><br>07</div>
    <div class="l" id="l8"  style="float: left;"><br><br>08</div>
    <div class="l" id="l9"  style="float: left;"><br><br>09</div>
        <div style="clear: both;"></div>
    <div class="l" id="l10"  style="float: left;"><br><br>10</div>
    <div class="l" id="l11"  style="float: left;"><br><br>11</div>
    <div class="l" id="l12"  style="float: left;"><br><br>12</div>

CSS

.hi{border-color:orange;}
.l{font-size: 50px; width: 100px; height: 100px; background: gray; text-align: center; color: #bbb;}

JavaScript

window.setInterval(yourfunction, 3000);
var j=1;
function yourfunction() {
    if(j<13){ $("#l"+j).css({ color:"white", background: "gray"},2000);
        if(j>1)$("#l"+(j-1)).css({ color:"#aaa", background: "gray"});
        if(j==1)$("#l7").css({ color:"#aaa", background: "gray"});
                      j++;
                               }else{
                                j=1;} 
                        }