Jquery transit test

HTML

<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://ricostacruz.com/jquery.transit/jquery.transit.js"></script>
<div class="topBar">
    <ul class="navContainer">
        <li>cat1</li>
        <li>cat2</li>
        <li>cat3</li>
        <li>cat4</li>
    </ul>
    
    <div class="whiteLine">
        <div class="blackLine"></div>
    </div>
</div>

CSS

body{
    background-color:#000;
}

.topBar{
    position:absolute;
    height:4em;
    width:100%;
    top:0em; left:0em;
    min-width:40em;
}

.navContainer{
    position:relative;
    float:right;
    padding-right:1em;
    top:2em;
    list-style-type:none;
    text-align:center;
    font-size:.8em;
    color:#fff;
}

.navContainer li{
    position:relative;
    float:right;
    margin-right:.25em;
    width:6em;
    height:2em;
    background-color:#f45;
}

.navContainer :nth-child(3){
    width:9em;
}

.whiteLine{
    position:absolute;
    height:.2em;
    width:100%;
    bottom:0em;
    background-color:#fff;
}

.whiteLine .blackLine{
    position:absolute;
    height:.2em;
    bottom:0em;
    background-color:#000;
}

JavaScript

(function() {
   var $navContainer = $(document.body).find('.navContainer'),
        _$blackLine = $(document.body).find('.blackLine');
    for(var i=0;i<$navContainer.children().length;i++){
                 var $cat  = $navContainer.children().eq(i);
                 $cat.click(function(e){onCatMouseEvent(e);})
                   .mouseenter(function(e){onCatMouseEvent(e);})
                   .mouseleave(function(e){onCatMouseEvent(e);})
           }
    
    
    onCatMouseEvent = function(e){
        switch(e.type){
            case 'mouseenter':
                moveLine(e.target);
                break;
            case 'mouseleave':
                break;
            case 'click':
                break;
        }
    };
    
    
    moveLine = function(target){
        var width =   $(target).width();
        var pos = $(target).offset().left;
        _$blackLine.transition({'-webkit-transform': 'translateX(' + (pos)  + 'px)', 'width':width + 'px'},  1500 );
    }
    
    //_$blackLine.stop().clearQueue().transition({'-webkit-transform': 'translateX(' + (pos)  + 'px)', 'width':width + 'px'},  1500 );
    //}
    
})();