Question

我是一个尝试学习它的jQuery-noob，我遇到了问题。我不希望我的div在彼此之间褪色，比如1 - 2 - 1 - 2 - 1 - 2 ...... 我希望它重复，但它只会做一些，然后停止。

代码（一个或多个）：

   <script>
            function fadeInOut () {
          $('#text-2').delay(3000).fadeOut(750, function() {
            $('#text-5').fadeIn(750, function() {
        $('#text-5').delay(3000).fadeOut(750, function() {
            $('#text-2').fadeIn(750);
          });
          });
          });
         }
        $(document).ready(function(){
            fadeInOut();
        });
    </script>
    <style>
        #ESCM{
        width:400px;
        float:right;
        background-image: linear-gradient(left bottom, rgb(251,86,91) 0%, rgb(14,34,40) 68%, rgb(0,66,64) 77%);
        background-image: -o-linear-gradient(left bottom, rgb(251,86,91) 0%, rgb(14,34,40) 68%, rgb(0,66,64) 77%);
        background-image: -moz-linear-gradient(left bottom, rgb(251,86,91) 0%, rgb(14,34,40) 68%, rgb(0,66,64) 77%);
        background-image: -webkit-linear-gradient(left bottom, rgb(251,86,91) 0%, rgb(14,34,40) 68%, rgb(0,66,64) 77%);
        background-image: -ms-linear-gradient(left bottom, rgb(251,86,91) 0%, rgb(14,34,40) 68%, rgb(0,66,64) 77%);

        background-image: -webkit-gradient(
            linear,
            left bottom,
            right top,
            color-stop(0, rgb(251,86,91)),
            color-stop(0.68, rgb(14,34,40)),
            color-stop(0.77, rgb(0,66,64))
        );

        padding:20px;
        box-shadow:0 1px 8px rgba(0,0,0,0.7);
        border-radius:5px;
        moz-border-radius:5px;
        o-border-radius:5px;
            height:621px;
        }
        #text-5{
            display:none;
        }
        html{
            color:white;
            font-family:sans-serif;
        }
        h2{
            font-size:26px;
        }
        }
    </style>
<html>    
<div id="ESCM">
    <h2>De tävlande</h2>
    <div id="text-2">
        Test1
    </div>
        <div id="text-5">
        Test2
    </div>
</div>
</html>

JS-Fiddle

IN ACTION

Answer 1

完成后，您需要再次调用fadeInOut功能。将您的功能更改为：

function fadeInOut() {
    $('#text-2').delay(3000).fadeOut(750, function () {
        $('#text-5').fadeIn(750, function () {
            $('#text-5').delay(3000).fadeOut(750, function () {
                $('#text-2').fadeIn(750, fadeInOut);
            });
        });
    });
}
fadeInOut();

<强> jsFiddle example

Answer 2

简短而简单： -

使用array.shift()从阵列中获取第一项将其删除并将其推送到最后。然后在回叫中使用fadeInOut。

Demo

var ids=["text-2","text-5"];
function fadeInOut () {
    var id = ids.shift(); //This will ensure cycle to happen. 
     //no matter how many divs you add. you just need to add it in the array ids.

    ids.push(id);
    var idin = ids[0];
    $('#' + id).delay(1000).fadeOut(750, function() {

            $('#' + idin).fadeIn(750, fadeInOut);
  });
 }
$(document).ready(function(){
    fadeInOut();
});

Demo with multiple divs

这里我只更新了数组，没有代码重复。

var ids=["text-2","text-5","text-6","text-7","text-8","text-9"];
function fadeInOut () {
    var id = ids.shift();
    ids.push(id);
    var idin = ids[0];
    $('#' + id).delay(1000).fadeOut(750, function() {

            $('#' + idin).fadeIn(750, fadeInOut);
  });
 }
$(document).ready(function(){
    fadeInOut();
});

Answer 3

试试这个 -

$('#text-2').delay(3000).fadeOut(750, function() {
       $('#text-5').fadeIn(750, function() {
         $('#text-5').delay(3000).fadeOut(750, function() {
           $('#text-2').fadeIn(750,function() {   
              fadeInOut();
           });
         });
       });
});

Answer 4

你应该尝试setInterval：

$(document).ready(function(){
    setInterval(function() {
        fadeInOut();}, 1000);
});

JsFiddle

jQuery淡入淡出功能不重复

4 个答案:

Demo

Demo with multiple divs