Question

我对jQuery有点问题。我尝试在div中显示多个文本。这些divs应该fadein和fadeout，最后功能应该重新启动。

我写了一个简单的例子，当它运行时。它开始很好......

一个
2
3
4
5
6

当函数循环时，问题就开始了。它显示以下顺序：

2
4
5
6 然后从这个订单开始。

我不明白。任何人都可以指出我正确的方向吗？

脚本：

<html>
<head>
<script type="text/javascript" src="jquery151.js"></script>


    <script type="text/javascript">
$(document).ready(function() {
    function loop() {

    var fadeTime = 1000;
    var delayTime = 3200;       

    //if($('#layout4TextTitel').is(':visible') ) {
    $('#layout4TextTitel').fadeOut(fadeTime, function() {
    $('#layout4TextTitel').empty().html('one');
    });
    $('#layout4TextTitel').fadeIn(1000).delay(delayTime);


    $('#layout4TextTitel').fadeOut(fadeTime, function() {
    $('#layout4TextTitel').html('two').fadeIn(1000).delay(delayTime);
    }); 

    $('#layout4TextTitel').fadeOut(fadeTime, function() {
    $('#layout4TextTitel').empty().html('three');
    });
    $('#layout4TextTitel').fadeIn(fadeTime).delay(delayTime);

    $('#layout4TextTitel').fadeOut(fadeTime, function() {
    $('#layout4TextTitel').empty().html('four');
    });
    $('#layout4TextTitel').fadeIn(fadeTime).delay(delayTime);

    $('#layout4TextTitel').fadeOut(fadeTime, function() {
    $('#layout4TextTitel').empty().html('five');
    });
    $('#layout4TextTitel').fadeIn(fadeTime).delay(delayTime);

    $('#layout4TextTitel').fadeOut(fadeTime, function() {
    $('#layout4TextTitel').empty().html('six');
    });
    $('layout4TextTitel').fadeIn(fadeTime).delay(delayTime);                                                    
     // Ende for-Schleife       

    } // Ende loop()

    for(var x = 0; x <=1000; x++) {
        loop();
    } // Ende for-Schleife

    });

</script>
</head>
<body>
<div id="layout4TextTitel"></div>
</body>

Answer 1

<html>
<head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            function loop(x){
                var count_down = ["one","two","three","four","five","six"];
                if(x>=count_down.length)x=0;
                $('#layout4TextTitel').fadeOut(1000, function() {
                    $('#layout4TextTitel').empty().html(count_down[x]);
                });
                $('#layout4TextTitel').fadeIn(1000).delay(3200);
                setTimeout(function(){loop(x+1)},1000);
            }
            loop(0);
        });
    </script>
</head>
<body>
    <div id="layout4TextTitel"></div>
</body>

Answer 2

你的循环将在比单个fadeIn或fadeOut完成所花费的时间更短的时间内执行1000次。你告诉已经动画的元素再次动画......在不到一秒的时间内完成1000次。

使用setInterval让loop()每X毫秒运行一次。

Answer 3

jQuery有一个动画队列。你向它添加东西，它们将来会在某个时候执行（动画）。现在，在您的循环中添加6000次fadeOut，fadeIn和delay。虽然不是很优雅，但它会起作用。但是您的代码中存在问题：

$('#layout4TextTitel').fadeOut(fadeTime, function() {
    $('#layout4TextTitel').html('two').fadeIn(1000).delay(delayTime);
});

与其他代码段不同，您可以在fadeIn回调中添加delay和fadeOut - 在已经在队列中的所有16000个其他项目之后。这样，队列中连续有两个fadeOut，只有一个会执行。两个回调都将被调用，但在你的古老版本的jQuery中，它们的顺序是相反的（Demo; fixed now） - 因此它首先将html设置为"three"，然后将其设置为{{{} 1}} - 你不会看到＆＃34;三＆＃34;出现。

Answer 4

对于jQuery中的计时，我建议使用jquery-timing。

使用整个代码中的插件获取：

var texts = ['one','two','three','four','five','six'];

function nextText(i) {
  this.html(texts[i % texts.length]);
}

$('#layout4TextTitel').hide().repeat(nextText)
  .fadeIn(1000,$).wait(3500).fadeOut(1000,$);

请参阅http://jsfiddle.net/creativecouple/VXgcw/

上的此示例

循环函数的jQuery失败

4 个答案: