jquery标签页切换导致轮播混乱（“动画累积”）问题解析

发表于 | 分类于

  用jquery写了一个轮播页面，该页面的自动轮播和点击跳转一切正常；但后来发现一个奇怪的现象，当我切换到另一个标签页并在此停留一段时间后，再次返回轮播页，发现该页面的轮播效果混乱了，图片在快速的切换，但此时的指示器却是正常运转的；过了一段时间才变成正常的轮播效果；
  开始时觉得百思不得其解（毕竟我是个菜鸟），自己试着调了调，没找到解决方法（我果然是个菜鸟）；于是只好求助某搜索工具了，在某乎找到该问题，具体可看这里：点击链接；
   这才知道原来这个问题的原因就是，我的自动轮播采用的是定时器+jquery fadeIn()/ fadeOut()方法实现的，当我们离开轮播页（并未关闭该页面）后，定期器继续运行，但是动画效果并没有同步运行，而是被浏览器缓存起来了（“动画累积”），当我们返回轮播页后，积累了一段时间的动画才重新开始连续运行，这就导致了轮播混乱，直到累积的效果运行完毕，才重新开始正常的轮播；
  知道混乱的原因后就好办了；解决方法就是在每次动画开始前，清除之前累积的所有效果，jquery提供的stop(true,true)方法刚好满足我们的需求，关于里面的两个参数的描述，可以看这里：不做伸手党，点这里
修改后代码如下：

1
2
3
4
5
6
7
8
//动画
       var move = function(index){
           //console.log(index);
           $("#pic li").eq(index).stop(true,true).fadeIn(500).siblings().stop(true,true).fadeOut(500);//每次动画前停止之前的动画
           $("#next img").eq(index).show().siblings().hide();
           $("#banner1").css('background',bkColor[index]);
           directMove(index);
       };

  之前还说到，页面轮播混乱时指示器能正常切换，，在知道原因后去看自己的源码发现：指示器使用的是animate()方法，每次动画前已经添加了个清除动作（至于为什么会添加，我估计是顺手而为，，嗯，，我的确是个菜鸟）；指示器代码：

1
2
3
4
var directMove = function (index) {
          $("#director li").eq(index).siblings().find('span').stop(true).css({'left':'-101%','height':0});
          $("#director li").eq(index).find('span').stop(true).css({'height':'2px'}).animate({'left':0},4000);
      };

 ok，到此为止，轮播混乱的问题就算解决了；此时再去看轮播效果，再也不会出现混乱的问题了，perfect !