$("li:lt(" + (idx + 1) + ")").each(function(i){
注意，这里必须要加括号，是因为如果不加，idx与前面 "li:lt(" 先运算，就会变成字符串类型的，然后再与后面的1 相加，就变成了字符串与字符串相加，输出的结果
是字符串的拼接。
console.log("li:lt(" + (2 + 1) + ")")
VM72:1 li:lt(3)
console.log("li:lt(" + 2 + 1 + ")");
VM76:1 li:lt(21)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{
padding:0;
margin:0;
}
ul,ol{
list-style: none;
}
a{
text-decoration: none;
color:#333;
}
.box{
900px;
height: 300px;
border: 1px solid #000;
margin: 50px auto;
overflow: hidden;
position: relative;
}
.box ul li{
position: absolute;
left:0px;
560px;
height: 300px;
}
.box ul li.no1{
left:180px;
}
.box ul li.no2{
left:360px;
}
.box ul li.no3{
left:540px;
}
.box ul li.no4{
left:720px;
}
.box ul li .mask{
position: absolute;
560px;
height: 300px;
left:0;
top:0;
background-color: rgba(0,0,0,.6);
}
</style>
</head>
<body>
<div class="box">
<ul>
<li class="no0">
<div class="mask"></div>
<a href=""><img src="images/0.jpg" alt=""></a>
</li>
<li class="no1">
<div class="mask"></div>
<a href=""><img src="images/1.jpg" alt=""></a>
</li>
<li class="no2">
<div class="mask"></div>
<a href=""><img src="images/2.jpg" alt=""></a>
</li>
<li class="no3">
<div class="mask"></div>
<a href=""><img src="images/3.jpg" alt=""></a>
</li>
<li class="no4">
<div class="mask"></div>
<a href=""><img src="images/4.jpg" alt=""></a>
</li>
</ul>
</div>
<script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>
<script type="text/javascript">
$("li").mouseenter(function(){
// 将触发事件的对象序号保存
var idx = $(this).index();
// 小于等于序号往左移动85
$("li:lt(" + (idx + 1) + ")").each(function(i){
$(this).animate({"left": 85 * i},400);
});
// 大于信号序号往右移动
$("li:gt(" + idx + ")").each(function(i){
// console.log(i);
$(this).animate({"left": 560 + 85 * (idx + i)},400);
});
// 鼠标进入图片去掉蒙版
$(this).children(".mask").fadeOut();
// 其他兄弟加上蒙版
$(this).siblings().children(".mask").fadeIn();
});
// 鼠标离开恢复原状
$(".box").mouseleave(function(){
$("li").stop(true);
$("li").each(function(i){
// console.log(i);
$(this).animate({"left": 180 * i},400);
});
$("li").children(".mask").fadeIn();
});
</script>
</body>
</html>