Loop in Jquery not working

Question

I am not able to loop in jquery, I want different boxes to appear consecutively each after other. Right now they are displaying only once. Also I wants to fadein dark red box then fadeout dark red box, after it dark green fadein and fadeout dark green and consecutively every box in a loop and the whole process should work continously and when someone hover it should stop fading and start fading on mouseout. Please help me

Please find my codes below:

        <script>
        $(document).ready(function() {
                function loop() {       
                setTimeout(function() {
                    $('.red_hover').delay(1000).fadeIn ({
                    }, 1000, "linear", function(){        
                    });

                    $('.red_hover').delay(1000).fadeOut ({
                    }, 1000, function(){        
                    });
                }, 1000);

                setTimeout(function() {
                    $('.green_hover').delay(1000).fadeIn ({
                    }, 1000, "linear", function(){        
                    });
                    $('.green_hover').delay(1000).fadeOut ({
                    }, 1000, function(){        
                    });
                }, 4000);

                }
                loop();
            });
        </script>

CSS:

            <style>
                .red{width:100px; height:100px; background:#F00; float:left;  
                 overflow:hidden; position:absolute; margin:0 0 0 10px;}
                .red_hover{width:100px; height:100px; background:#900; float:left;  
                 overflow:hidden; position:absolute; margin:0 0 0 10px; display:none;}

                .green{width:100px; height:100px; background:#0C3; float:left;  
                 overflow:hidden; margin:0 0 0 120px; position:absolute;}
                .green_hover{width:100px; height:100px; background:#060; float:left; 
                 overflow:hidden; position:absolute; margin:0 0 0 120px; display:none;}

                .blue{width:100px; height:100px; background:#09F; float:left; 
                 overflow:hidden; margin:0 0 0 230px; position:absolute;}
                .blue_hover{width:100px; height:100px; background:#00F; float:left; 
                 overflow:hidden; position:absolute; margin:0 0 0 230px; display:none;}

                .yellow{width:100px; height:100px; background:#FF0; float:left; 
                 overflow:hidden; margin:0 0 0 340px;}
                .yellow_hover{width:100px; height:100px; background:#F90; float:left; 
                 overflow:hidden; position:absolute; margin:0 0 0 340px; display:none;}

                .pink{width:100px; height:100px; background:#FCF; float:left; 
                 overflow:hidden; margin:0 0 0 450px; position:absolute;}
                .pink_hover{width:100px; height:100px; background:#F0F; float:left; 
                 overflow:hidden; position:absolute; margin:0 0 0 450px; display:none;}
            </style>

HTML:

            <div class="red"></div>
            <div class="red_hover"></div>
            <div class="green"></div>
            <div class="green_hover"></div>
            <div class="blue"></div>
            <div class="blue_hover"></div>
            <div class="yellow"></div>
            <div class="yellow_hover"></div>
            <div class="pink"></div>
            <div class="pink_hover"></div>

Here's the fiddle: http://jsfiddle.net/Lepw197v/

I don't see an actual loop occurring. You are just calling it once as it stands. A loop construct like for( var i = 0; i < 5; i ++ ){} would run your code 5 times if loop was inside of it — Scott Mitchell, Aug 10 '14 at 05:16
@Scott ok but what would be the variable for this ? Because every colour has a different class. — Webdesigner15, Aug 10 '14 at 05:20
@ArunPJohny add this .`red, .green, .blue, .yellow, .pink{ display:none; }` — Harsh, Aug 10 '14 at 05:23
@Arun Its working continuously :) Can u also tell me if it can stop on hover and start working againg on mousout — Webdesigner15, Aug 10 '14 at 05:25

bergie3000 · Answer 1 · 2014-08-10T05:33:25.753

0

I think you want "setInterval" instead of "setTimeout".

See this fiddle. It doesn't work perfectly but it's close to what you want I think. http://jsfiddle.net/bergonom/3bzfL87s/

HTML:

<div id="ColorBlocks">
<div class="red"></div>
            <div class="red_hover"></div>
            <div class="green"></div>
            <div class="green_hover"></div>
            <div class="blue"></div>
            <div class="blue_hover"></div>
            <div class="yellow"></div>
            <div class="yellow_hover"></div>
            <div class="pink"></div>
            <div class="pink_hover"></div>
</div>

JS:

$(document).ready(function() {
    var redInterval, greenInterval;
                function loop() {       
                redInterval = setInterval(function() {
                    $('.red_hover').delay(1000).fadeIn ({
                    }, 1000, "linear", function(){        
                    });

                    $('.red_hover').delay(1000).fadeOut ({
                    }, 1000, function(){        
                    });
                }, 1000);

                greenInterval = setInterval(function() {
                    $('.green_hover').delay(1000).fadeIn ({
                    }, 1000, "linear", function(){        
                    });
                    $('.green_hover').delay(1000).fadeOut ({
                    }, 1000, function(){        
                    });
                }, 4000);

                }
                loop();

    $("#ColorBlocks").on("mouseover","> div", function() {
        clearInterval(redInterval);
        clearInterval(greenInterval);
    });

    $("#ColorBlocks").on("mouseout","> div", function() {
        loop();
    });

(Although your question and my response are getting downvoted for some reason. It would be nice if people explained why.)

edited Aug 10 '14 at 05:33

answered Aug 10 '14 at 05:20

bergie3000

1,091
1
13
21

I downvoted your original answer because all you wrote was a one-liner, saying 'I think you want "setInterval" instead of "setTimeout"' with no explanation as to why you 'think' this is better. As it was written, it was a poor answer, but much better now. However, I do feel `setTimeout` and `setInterval` can *both* be used here and I would actually prefer `setTimeout` for ongoing animations like this - the reason why is best explained here: http://stackoverflow.com/a/731625/933633 – TheCarver Aug 10 '14 at 05:49
@PaparazzoKid: Ironic that you downvoted me for a one line answer but you didn't initially even provide a single word as to why. That being said I appreciate your explanation after the fact. – bergie3000 Aug 11 '14 at 19:42
Nothing ironic about that, *at all*. Cheers. – TheCarver Aug 11 '14 at 20:23
Well now you're just deliberately being incorrect. I'll know to ignore your responses in the future. – bergie3000 Aug 12 '14 at 04:32
Now you're deliberately being childish. This is the very reason people don't like giving feedback on downvotes - becuase people like you cannot handle the critisism and end up wanting to argue over nothing. You just couldn't be a man and accept my feedback, could you? All you had to say was "thanks for the feedback". Grow up! – TheCarver Aug 12 '14 at 14:05
I can handle the criticism .. you didn't give me any! That's the whole point. You downvoted me without telling me why. I therefore had no information about to improve myself. When you finally did explain the downvote I said, and I quote, "I appreciate your explanation." It would be difficult for your last statement to be more incorrect. – bergie3000 Aug 12 '14 at 18:36
Have a lovely day, Bergie. – TheCarver Aug 12 '14 at 18:52

score 0 · Answer 2 · answered Aug 10 '14 at 05:29

Something like this?

http://jsfiddle.net/YoshiMaster/juz4jsx0/3/

$(document).ready(function() {
      function loop() {   

        $(".red").fadeOut(function(){green()});
        $(".green").fadeIn();
      }
      function green(){
           $(".red").fadeIn();
           $(".green").fadeOut();
      }

       setInterval(function() {loop()},1000);

  });

Loop in Jquery not working

2 Answers2