鼠标移入图片切换时会出现轻微抖动，求解

$li.mouseover(function(){
var that = this;
timer = setTimeout(function(){
index = $(that).index();
$(that).find("div").css('z-index','10');
$li.eq($li.length-1).css('border-right','8px solid #dc0202');
$(that).stop().animate({width:918},500).siblings("li").stop().animate({width:64},500);
$(that).find("img").addClass('tm').closest('li').siblings().find('img').removeClass('tm');
if(index != $li.length-1){
  $li.eq($li.length-1).css('border-right','8px solid #fff');
}
},150);
}).mouseout(function(){
clearTimeout(timer);
});
感觉红色部分有问题，但是看不出来
这是HTML
<ul id="sliderAll">
     <li class="first">
            <div class="imgTop">
                <img src="images/ruili_img1.jpg" width="918" height="572" alt="" class="tm">
            </div>
        </li>
        <li>
         <div class="imgTop">
                <img src="images/ruili_img2.jpg" width="918" height="572" alt="">
            </div>
        </li>
        <li>
         <div class="imgTop">
                <img src="images/ruili_img3.jpg" width="918" height="572" alt="">
            </div>
        </li>
        <li>
         <div class="imgTop">
                <img src="images/ruili_img4.jpg" width="918" height="572" alt="">
            </div>
        </li>
        <li class="last">
         <div class="imgTop">
                <img src="images/ruili_img7.jpg" width="918" height="572" alt="">
            </div>
        </li>
    </ul>
这是.tm{
     border: 8px solid #dc0202;
 }