问题描述
如果你的项目中使用了老版本的jquery1.11.3，你一定会有这样的情况!
当我们快速在轮播图上面移动切换按钮的时候, 会等待队列中的动画执行完毕，这样就会导致很多动画压在队里中，即便是我们鼠标移开，不动，也会等待队列里面的动画执行完毕的等待情况, 破坏用户体验!
代码如下:
HTML结构
<div id="pic">
<ul>
<li class="show"><img src="img/1.jpg" alt=""/></li>
<li><img src="img/2.jpg" alt=""/></li>
<li><img src="img/3.jpg" alt=""/></li>
<li><img src="img/4.jpg" alt=""/></li>
<li><img src="img/5.jpg" alt=""/></li>
<li><img src="img/6.jpg" alt=""/></li>
<li><img src="img/7.jpg" alt=""/></li>
</ul>
<ol>
<li class="now"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ol>
<a href="javascript:;" id="prev"></a> <a href="javascript:;" id="next"></a>
</div>
CSS样式
* {
padding: 0px;
margin: 0px;
}
ul, ol {
list-style: none;
}
a {
text-decoration: none;
}
img{
}
#pic, #pic>ul, #pic>ul>li {
width: 590px;
height: 470px;
}
#pic {
border: 1px solid #ccc;
margin: 350px auto;
position: relative;
}
#pic>ul {
position: absolute;
top: 0px;
left: 0px;
}
#pic>ul>li {
position: absolute;
top: 0px;
left: 0px;
display: none;
}
/*显示 类*/
#pic>ul>li.show {
display: block;
}
#pic>ul>li>img{
width: 590px;
height: 470px;
}
#pic>ol {
position: absolute;
bottom: 10px;
left: 100px;
width: 200px;
height: 20px;
z-index: 2;
}
#pic>ol>li {
width: 12px;
height: 12px;
border-radius: 50%;
border: 1px solid #fee;
display: inline-block;
cursor:pointer;
margin-left: 10px;
}
#pic>ol>li.now {
background: #fff;
}
#pic>a {
width: 50px;
height: 50px;
z-index: 3;
display: block;
position: absolute;
cursor:pointer;
top: 200px;
}
#pic>a#prev {
left: 0;
background: url(img/pref.png) no-repeat center;
}
#pic>a#next {
right: 0;
background: url(img/next.png) no-repeat center;
}
jquery代码
$(document).ready(function() {
function common(){
$("#pic ol li").eq(num).addClass("now").siblings().removeClass("now");
$("#pic ul li").eq(num).fadeIn().siblings().fadeOut();
}
var num=0;
var timer=null;
$("#pic ol li").mouseover(function(){
clearInterval(timer);
var leng=$("#pic ol li").length;
for(var i=0;i<leng;i++){
num=$(this).index();
common();
}
});
function play(){
clearInterval(timer);
timer=setInterval(function(){
num++;
if(num==$("#pic ul li").length){
num=0;
}
common();
},1000)
}
play();
$("#pic").hover(function(){
clearInterval(timer);
},function(){
play();
})
$("#prev").click(function(){
num--;
if(num<0){
num=$("#pic ul li").length;
}
common();
})
$("#next").click(function(){
num++;
if(num==$("#pic ul li").length){
num=0;
}
common();
})
});
效果如图
代码分析
看到问题了吧~
因为fadeIn()方法显示图片不是及时显示，当用户鼠标悬浮在切换按钮上迅速切换时,
上一张图片有可能在鼠标悬浮在下一个按钮上时再显示, 那么如果移动速度快了，就会出现这样的问题!
解决方案
这时候，我们可以在fadeIn()和fadeout()方法前使用stop()方法来停止动画!
stop方法是jquery中用于控制页面动画效果的方法, 运行之后立刻结束当前页面上的动画效果!
具体大家可以API参考文档说明
如图
文档上的描述为停止所有在指定元素上正在运行的动画
在jquery1.11.3版本中stop()方法有两个参数 : [clearQueue],[gotoEnd] 值为布尔值
参数1: 意思是是否清空动画序列，也就是stop的是当前元素的动画效果, 还是停止后面附带的所有动画效果!
设置false为跳过当前动画效果，执行下一个动画效果
设置true为停止所有动画效果!
根据我们这里场景需求，这里我们应该设置为true
参数2 否将当前动画效果执行到最后 , 也就是让当前正在执行的动画立即完成!!
根据我们这里的场景需求，可以不用设置, 如果你设置为true动画看起来非常生硬, 因为是动画执行之后的效果
所以正确修改之后的jquery代码如下
$(document).ready(function() {
function common(){
$("#pic ol li").eq(num).addClass("now").siblings().removeClass("now");
$("#pic ul li").eq(num).stop(true).fadeIn().siblings().fadeOut();
}
var num=0;
var timer=null;
$("#pic ol li").mouseover(function(){
clearInterval(timer);
var leng=$("#pic ol li").length;
for(var i=0;i<leng;i++){
num=$(this).index();
common();
}
});
function play(){
clearInterval(timer);
timer=setInterval(function(){
num++;
if(num==$("#pic ul li").length){
num=0;
}
common();
},1000)
}
play();
$("#pic").hover(function(){
clearInterval(timer);
},function(){
play();
})
$("#prev").click(function(){
num--;
if(num<0){
num=$("#pic ul li").length;
}
common();
})
$("#next").click(function(){
num++;
if(num==$("#pic ul li").length){
num=0;
}
common();
})
});
这里其实就给fadeIn前面加stop方法就可以了，fadeOut可以不加~
如图
这样我们快速移动切换的时候，就不会出现等待队列中的动画执行完的情况了~
