避免延遲與jQuery和CSS動畫

我做了一個滑塊與jQuery和CSS動畫。問題在於動畫運行需要幾秒鐘的時間。爲了避免延遲，我在所有jQuery函數中使用了超時。我怎樣才能讓滑塊加載更快？避免延遲與jQuery和CSS動畫

這裏是一個小提琴：https://jsfiddle.net/WalentinW/3nL8ndps/1/

和html代碼：

<div class="center"> 
      <div id="img-g-1"> 
       <div id="img-1-t" class="img-h-t"> 
       </div> 
       <div id="img-2-t" class="img-h-t"> 
       </div> 
      </div> 

      <div id="img-g-2"> 
       <div id="img-3-t" class="img-h-t"> 
       </div> 
       <div id="img-4-t" class="img-h-t"> 
       </div> 
      </div>  
     </div>

的jQuery：

$(document).ready(function(){ 
    //slider 
     function slide1() { 
     if($("#img-1-t").hasClass("img-1-s3")) { 
      $("#img-1-t").removeClass("img-1-s3"); 
      $("#img-2-t").removeClass("img-2-s3"); 
      $("#img-3-t").removeClass("img-3-s3"); 
      $("#img-4-t").removeClass("img-4-s3"); 
      $(".img-h-t").removeClass("s3"); 
     } 

     }; 

     function slide2() { 
      $("#img-1-t").addClass("img-1-s2"); 
      $("#img-2-t").addClass("img-2-s2"); 
      $("#img-3-t").addClass("img-3-s2"); 
      $("#img-4-t").addClass("img-4-s2"); 
      $(".center").addClass("s2"); 
      $(".img-h-t").addClass("s2");  
     }; 

     function slide3() { 
      $("#img-1-t").removeClass("img-1-s2").addClass("img-1-s3"); 
      $("#img-2-t").removeClass("img-2-s2").addClass("img-2-s3"); 
      $("#img-3-t").removeClass("img-3-s2").addClass("img-3-s3"); 
      $("#img-4-t").removeClass("img-4-s2").addClass("img-4-s3"); 
      $(".center").removeClass("s2"); 
      $(".img-h-t").removeClass("s2").addClass("s3"); 

      setTimeout(function(){ 
      $("#t3, #t7, #t11").fadeIn(300); 
      }, 900); 
      setTimeout(function(){ 
      $("#t4, #t8, #t12").fadeIn(300); 
      }, 1200); 
      setTimeout(function(){ 
      $("#t2, #t6, #t10").fadeIn(300); 
      }, 1500); 
      setTimeout(function(){ 
      $("#t1, #t5, #t9").fadeIn(300); 
      }, 1800); 

      setTimeout(function(){ 
      $("#t3, #t7, #t11").fadeOut(300); 
      }, 3100); 
      setTimeout(function(){ 
      $("#t4, #t8, #t12").fadeOut(300); 
      }, 3100); 
      setTimeout(function(){ 
      $("#t2, #t6, #t10").fadeOut(300); 
      }, 3100); 
      setTimeout(function(){ 
      $("#t1, #t5, #t9").fadeOut(300); 
      }, 3100); 

     }; 

     var intervalFunctions = [ slide1, slide2, slide3 ]; 
     var intervalIndex = 0; 
     window.setInterval(function(){ 
     intervalFunctions[intervalIndex++ % intervalFunctions.length](); 
     }, 3000); 
});

CSS：

.center { 
      margin: 0px auto; 
      height: 600px; 
      width: 800px; 
      display: -webkit-box; 
      display: -moz-box; 
      display: -ms-flexbox; 
      display: -webkit-flex; 
      display: flex; 
      -webkit-flex-flow: row nowrap; 
      flex-flow: row nowrap; 
      justify-content: center; 
      -webkit-transition: all 2s ease; 
      -moz-transition: all 2s ease; 
      -o-transition: all 2s ease; 
      transition: all 2s ease; 

     } 

     .center.s2 { 
      width: 748px; 
     } 

      .img-h-t { 
      background: white; 
     } 

     #img-g-1 { 
      margin: 0 auto; 
     } 

     #img-g-2 { 
      margin: 0 auto; 
     } 

     #img-g-1 > .img-h-t { 
      margin-left: 8px; 
     } 

     #img-g-2 > .img-h-t { 
      margin-right: 8px; 
     } 

     #img-g-1 > .img-h-t.s2 { 
      margin-left: 4px; 
     } 

     #img-g-2 > .img-h-t.s2 { 
      margin-right: 4px; 
     } 

     #img-1-t, #img-3-t { 
      margin-bottom: 4px; 
     } 

     #img-2-t, #img-4-t { 
      margin-top: 4px; 
     } 

     #img-1-t { 
      margin-left: 24px !important; 
      height: 240px; 
      width: 312px; 
      -webkit-transition: all 2s ease; 
      -moz-transition: all 2s ease; 
      -o-transition: all 2s ease; 
      transition: all 2s ease; 
      -webkit-clip-path: polygon(156px 120px, 312px 0, 312px 240px, 0 240px); 
      clip-path: polygon(156px 120px, 312px 0, 312px 240px, 0 240px); 
      shape-inside: polygon(156px 120px, 312px 0, 312px 240px, 0 240px); 
     } 

     #img-1-t.img-1-s2{ 
      margin-left: 4px !important; 
      height: 270px; 
      width: 365px; 
      -webkit-clip-path: polygon(0 0, 365px 0, 365px 270px, 182.5px 270px); 
      clip-path: polygon(0 0, 365px 0, 365px 270px, 182.5px 270px); 
      shape-inside: polygon(0 0, 365px 0, 365px 270px, 182.5px 270px); 
     } 

     #img-1-t.img-1-s3{ 
      margin-left: 4px !important; 
      height: 300px; 
      width: 428px; 
      -webkit-clip-path: polygon(0 0, 428px 0, 206px 300px, 0 300px); 
      clip-path: polygon(0 0, 428px 0, 206px 300px, 0 300px); 
      shape-inside: polygon(0 0, 428px 0, 206px 300px, 0 300px); 
     } 

     #img-2-t { 
      height: 300px; 
      width: 328px; 
      -webkit-clip-path: polygon(164px 150px, 328px 300px, 328px 0, 0 0); 
      clip-path: polygon(164px 150px, 328px 300px, 328px 0, 0 0); 
      shape-inside: polygon(164px 150px, 328px 300px, 328px 0, 0 0); 
      transition: all 2s ease; 
     } 

      #img-2-t.img-2-s2{ 
       height: 270px; 
      width: 365px; 
      -webkit-clip-path: polygon(0 270px, 365px 270px, 365px 0, 182.5px 0); 
      clip-path: polygon(0 270px, 365px 270px, 365px 0, 182.5px 0); 
      shape-inside: polygon(0 270px, 365px 270px, 365px 0, 182.5px 0); 
     } 

     #img-2-t.img-2-s3{ 
      margin-bottom: 16px; 
      padding-bottom: 16px; 
      margin-left: 4px !important; 
      height: 240px; 
      width: 430px; 
      -webkit-clip-path: polygon(0 240px, 430px 240px, 205px 0, 0 0); 
      clip-path: polygon(0 240px, 430px 240px, 205px 0, 0 0); 
      shape-inside: polygon(0 240px, 430px 240px, 205px 0, 0 0); 
     } 

     #img-3-t { 
      height: 285px; 
      width: 418px; 
      -webkit-clip-path: polygon(0 285px, 418px 285px, 209px 142.5px, 0 0); 
      clip-path: polygon(0 285px, 418px 285px, 209px 142.5px, 0 0); 
      shape-inside: polygon(0 285px, 418px 285px, 209px 142.5px, 0 0); 
      transition: all 2s ease; 
     } 

      #img-3-t.img-3-s2{ 
       height: 270px; 
      width: 365px; 
      -webkit-clip-path: polygon(0 270px, 182.5px 270px, 365px 0, 0 0); 
      clip-path: polygon(0 270px, 182.5px 270px, 365px 0, 0 0); 
      shape-inside: polygon(0 270px, 182.5px 270px, 365px 0, 0 0); 
     } 

     #img-3-t.img-3-s3{ 
      height: 220px; 
      width: 346px; 
      -webkit-clip-path: polygon(172px 220px, 346px 220px, 346px 0, 0 0); 
      clip-path: polygon(172px 220px, 346px 220px, 346px 0, 0 0); 
      shape-inside: polygon(172px 220px, 346px 220px, 346px 0, 0 0); 
     } 
     #img-4-t { 
      margin-bottom: 16px; 
      padding-bottom: 16px; 
      height: 240px; 
      width: 448px; 
      -webkit-clip-path: polygon(0 240px, 224px 120px, 448px 0, 0 0); 
      clip-path: polygon(0 240px, 224px 120px, 448px 0, 0 0); 
      shape-inside: polygon(0 240px, 224px 120px, 448px 0, 0 0); 
      transition: all 2s ease; 
     } 

     #img-4-t.img-4-s2{ 
      margin-bottom: 0px; 
      padding-bottom: 0px; 
      height: 270px; 
      width: 365px; 
      -webkit-clip-path: polygon(0 270px, 365px 270px, 182.5px 0, 0 0); 
      clip-path: polygon(0 270px, 365px 270px, 182.5px 0, 0 0); 
      shape-inside: polygon(0 270px, 365px 270px, 182.5px 0, 0 0); 
     } 

     #img-4-t.img-4-s3{ 
      height: 320px; 
      width: 348px; 
      -webkit-clip-path: polygon(0 320px, 348px 320px, 348px 0, 172px 0); 
      clip-path: polygon(0 320px, 348px 320px, 348px 0, 172px 0); 
      shape-inside: polygon(0 320px, 348px 320px, 348px 0, 172px 0); 
     }

來源

2017-07-10 Walentin Widgren

* 「爲了避免我用延遲'的setTimeout（）'」 * ...'的setTimeout（）'的唯一目的是創造* *延遲 - 你什麼意思你用它來*避免*他們？或者你真的指jQuery'.delay（）'？你能解釋清楚你的問題嗎？ – Santi

https://jsfiddle.net/3nL8ndps/2/似乎沒有所有的超時和淡入都表現完全一樣。可能是因爲所有的轉換都被CSS延遲了2秒。真的不知道你想解決什麼問題？ – ADyson

像評論說，setTimeout()只能添加新的延遲...
也許你想用火來對抗火...但它不是它的工作方式。

您使用觸發每個動畫步驟。
這是一個3秒的間隔。

第一個這個間隔的迭代發生在頁面加載後3秒。
要觸發負載動畫的第一步，僅僅是文件準備包裝結束前添加此權：

intervalFunctions[intervalIndex++ % intervalFunctions.length]();

將只執行一次，上載。
然後間隔將繼續。

CodePen

來源

2017-07-10 16:20:35

對不起，我感到困惑。我之前使用了延遲而不是超時，並導致了一些問題。但感謝您的解決方案。它效果很好 –

避免延遲與jQuery和CSS動畫

回答

相關問題