代码

<script type="text/javascript" src="js/lib/jquery-3.2.1.js" ></script>
<script>
$("div").mouseleave(function() {
            $("li").stop(true);
            
            $(".no0").animate({"left": 0});
            $(".no1").animate({"left": 120});
            $(".no2").animate({"left": 240});
            $(".no3").animate({"left": 360});
            $(".no4").animate({"left": 480});
        })
        
        
        // 1. 给所有的li都添加 鼠标移入的事件（mouseenter不会冒泡的）
        $("li").mouseenter(function() {
            $("li").stop(true);
            
            // 2. 找出变化值
            //    （1） 当前是哪个li， li 的下标 i
            //    （2）  <= i 的就是  往左边偏
            //                   0,60,120,180,240
            //          > i  的就是  往右边偏
            //                   0,560,620,680,740
            var i = $(this).index();
            
            var left = [0,60,120,180,240]; // 左边偏的值
            var right = [ 0,560,620,680,740]; // 右边偏的值
            
            // 遍历所有的li
            $("li").each(function(j) {
                if (j <= i) {
                    $(this).animate({"left": left[j]});
                } else {
                    $(this).animate({"left": right[j]});
                }
            });
            
        })
</script>

遇到的问题

this 的用法还是不太清楚，需要加深理解。
初次用jQuery 不太熟练。