jquery1.11.3版本开发轮播图效果 fadeIn和fadeOut淡入淡出渐显 快速切换BUG解决方案

🚀 个人主页 极客小俊
✍🏻 作者简介：程序猿、设计师、技术分享
🐋 希望大家多多支持, 我们一起学习和进步！
🏅 欢迎评论 ❤️点赞💬评论 📂收藏 📂加关注

问题描述

如果你的项目中使用了老版本的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可以不加~

如图

这样我们快速移动切换的时候，就不会出现等待队列中的动画执行完的情况了~