代码
<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 不太熟练。
