CODEWITHSUNDEEP
jquerycss-animations
Walentin Widgren
Walentin Widgren

Reputation: 63

Avoid delay with jQuery and CSS animation

I've made a slider with jQuery and CSS animations. The problem is that it takes a couple of seconds before the animation runs. To avoid delays I've used timeout in all jQuery functions. How could I get the slider to load faster?

Here is a fiddle: https://jsfiddle.net/WalentinW/3nL8ndps/1/

and the html code:

<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);
        }

Upvotes: 0

Views: 64

Answers (1)

Louys Patrice Bessette
Louys Patrice Bessette

Reputation: 33933

Like said in comments, setTimeout() can only add new delays...
Maybe you wanted to fight fire with fire... But it isn't the way it works.

You use an interval() to trigger each animation steps.
It is a 3 seconds interval.

The first iteration of this interval occurs 3 seconds after page load.
To trigger the animation first step on load, just add this right before the end of the document ready wrapper:

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

It will be executed only once, on load.
Then the interval will continue.

CodePen

Upvotes: 1

Related Questions