Jquery中的循环不起作用

Question

我无法在 jquery 中循环，我希望不同的框一个接一个地连续出现。现在他们只显示一次。我也想淡入深红色框，然后淡出深红色框，在深绿色淡入和淡出深绿色之后，依次循环中的每个框，整个过程应该连续工作，当有人悬停时，它应该停止淡入并开始淡出鼠标.请帮帮我

请在下面找到我的代码：

        <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>

这是小提琴：http://jsfiddle.net/Lepw197v/

Answer 1

这样的？

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

  });

Answer 2

我认为你想要“setInterval”而不是“setTimeout”。

看这个小提琴。它不能完美地工作，但它接近你想要的我的想法。 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();
    });

（尽管由于某种原因，您的问题和我的回答被否决了。如果人们能解释原因会很好。）