<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style media="screen">
*{
margin: 0;
padding: 0;
}
.box{
width: 900px;
height: 300px;
border:1px solid #000;
position: relative;
overflow: hidden;
margin: 100px auto;
}
.box ul li{
list-style: none;
position: absolute;
top: 0;
}
.box ul li img{
width: 600px;
height: 300px;
}
.box ul li.img1{left: 0;}
.box ul li.img2{left: 225px;}
.box ul li.img3{left: 450px;}
.box ul li.img4{left: 675px;}
.mask{
width: 600px;
height: 300px;
background: #000;
opacity: 0.7;
position: absolute;
/*z-index: 999;*/
top: 0;
left: 0;
}
</style>
</head>
<body>
<div class="box">
<ul>
<li class="img1" >
<a href="#"><img src="images/0.jpg" alt=""></a>
<div class="mask"></div>
</li>
<li class="img2" >
<a href="#"><img src="images/1.jpg" alt=""></a>
<div class="mask"></div>
</li>
<li class="img3" >
<a href="#"><img src="images/2.jpg" alt=""></a>
<div class="mask"></div>
</li>
<li class="img4" >
<a href="#"><img src="images/3.jpg" alt=""></a>
<div class="mask"></div>
</li>
</ul>
</div>
</body>
<script src="jquery.js" charset="utf-8"></script>
<script type="text/javascript">
$(".box ul li").mouseenter(function(){
$("li").stop(true);
var index = $(this).index();
$(".box ul li").each(function(i){
if (i <= index) {
$(this).animate({"left":100 * i},700);
}else{
$(this).animate({"left": 100 * (i - 1) + 600},700);
}
})
$(this).find(".mask").stop().fadeOut();
})
$(".box li").mouseleave(function(){
$(this).find(".mask").stop().fadeIn();
$(".box li").each(function(i){
$(this).animate({"left": 225 * i},500)
})
})
</script>
</html>
以上是一个百叶窗的代码在代码中 stop的方法
stop（true） 表示停止队列中的所有动画，包括fadeIn fadeOut
如果是false 就是关闭当前的队列
还可以有第二个参数，如果是ture 表示完成当前的动画，false表示不完成当前的动画，
默认是stop（false，false）；
