避免延迟与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动画

回答

相关问题