jquery標籤頁切換導致輪播混亂（“動畫累積”）問題解析

版權聲明：本文爲博主原創文章，未經博主允許不得轉載。 https://blog.csdn.net/github_39532240/article/details/79260362

  用jquery寫了一個輪播頁面，該頁面的自動輪播和點擊跳轉一切正常；但後來發現一個奇怪的現象，當我切換到另一個標籤頁並在此停留一段時間後，再次返回輪播頁，發現該頁面的輪播效果混亂了，圖片在快速的切換，但此時的指示器卻是正常運轉的；過了一段時間才變成正常的輪播效果；
  開始時覺得百思不得其解（畢竟我是個菜鳥），自己試着調了調，沒找到解決方法（我果然是個菜鳥）；於是只好求助某搜索工具了，在某乎找到該問題，具體可看這裏：點擊鏈接；
   這才知道原來這個問題的原因就是，我的自動輪播採用的是定時器+jquery fadeIn()/ fadeOut()方法實現的，當我們離開輪播頁（並未關閉該頁面）後，定期器繼續運行，但是動畫效果並沒有同步運行，而是被瀏覽器緩存起來了（“動畫累積”），當我們返回輪播頁後，積累了一段時間的動畫才重新開始連續運行，這就導致了輪播混亂，直到累積的效果運行完畢，才重新開始正常的輪播；
  知道混亂的原因後就好辦了；解決方法就是在每次動畫開始前，清除之前累積的所有效果，jquery提供的stop(true,true)方法剛好滿足我們的需求，關於裏面的兩個參數的描述，可以看這裏：不做伸手黨，點這裏
修改後代碼如下：

 //動畫
        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()方法，每次動畫前已經添加了個清除動作（至於爲什麼會添加，我估計是順手而爲，，嗯，，我的確是個菜鳥）；指示器代碼：

  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 !