手风琴案例+stop的使用（解决动画队列的问题）
stop();// 停止当前正在执行的动画
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>title</title>
<style>
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
width: 1300px;
}
#box {
width: 1200px;
height: 400px;
border: 2px solid red;
margin: 100px auto;
}
#box li {
width: 240px;
height: 400px;
/*border: 1px solid #000;*/
float: left;
}
</style>
</head>
<body>
<div id="box">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<script src="../jquery-1.12.4.js"></script>
<script>
$(function () {
//获取所有的li
var $li = $("#box li");
//循环遍历拿到每个li
for (var i = 0; i < $li.length; i++) {
//当前的li设置背景图，图片地址用当前的
$li.eq(i).css("backgroundimage", "url(images/" + (i + 1) + ".jpg)");
}
//注册鼠标进入的事件
$li.mouseenter(function () {
//设置在当前li的时候的动画，和兄弟的动画
$(this).stop().animate({ width: 800 }).siblings().stop().animate({ width: 100 });
}).mouseleave(function () {
//设置鼠标离开时候，li的动画
$li.stop().animate({ width: 240 });
});
});
</script>
</body>
</html>
