javascript - jQuery循环函数失败

Question

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

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

一
二
三
四
五
六

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

二
四
五
六，然后以这个顺序重新开始。

我不明白。谁能指出我正确的方向？

这就是脚本：

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

score 1 · Accepted Answer

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

score 0 · Accepted Answer

您的循环将执行所有 1000 次，其时间比完成单个 fadeIn 或 fadeOut 所需的时间要短。您正在告诉已经动画的元素再次动画......在不到一秒钟的时间内完成 1000 次。

使用setIntervalloop()每 X 毫秒运行一次。

score 0 · Accepted Answer

对于 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/上的此示例

score 0 · Accepted Answer

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

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

与其他片段不同，您在此处在回调中添加fadeInand - 在队列中已经存在的所有其他 16000 个项目之后。这样，队列中有两个连续的 s，并且只有一个会执行。两个回调都将被调用，但在您的古老版本的 jQuery 中，它们的顺序是颠倒的（演示；现在已修复）-因此它将 html 设置为先到后，然后再设置为-您不会看到“三个”出现。delayfadeOutfadeOut"three""two"

javascript - jQuery循环函数失败

4 回答 4

Related

Reference