2

我是一个尝试学习它的 jQuery 菜鸟，但我遇到了问题。我不希望我的 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-小提琴

在行动

4

4 回答 4

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

于 2013-05-07T16:35:08.820 回答
1

简短而简单：-

使用array.shift()从数组中获取第一项，将其删除并将其推送到末尾。然后fadeInOut在回调中使用。

演示

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

带有多个 div 的演示

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

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();
});
于 2013-05-07T16:42:16.867 回答
0

你应该试试 setInterval：

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

提琴手

于 2013-05-07T16:43:19.807 回答
0

尝试这个 -

$('#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();
           });
         });
       });
});
于 2013-05-07T16:38:25.573 回答