Question

我想在div中显示几个字符串，但是它们应该淡入/淡出并被数组中的下一个字符串替换为第一个字符串。

来自freenode IRC上的#jquery的Cork建议我使用.queue，但它似乎没有用。什么都没有出现。

我在哪里错了？

此代码基于the last example on jquery's .queue page

<div class="introText"></div>

<script>
    /*
        Fade each above string in and out as content for the div sequentially
        in a loop
    */
    var Messages = [
        "Matured Dieting via Smartphone",
        "The Academic IQHE Diet",
        "For only R 400.00 / year",
        "Follow this super diet on mobile",
        "<a href=\"http://www.m.smartpeeps.co.za\">m.smartpeeps.co.za</a>"
    ];

    function IntroText() {
        var i = 0;
        var Div = $(".introText");

        // div text should start with Messages[0] and loop to
        // Messages[4], the restart at Messages[0] 
        $.each(Messages, function() {
            // hide the previously shown item
            if (i == 0) {
                if (i >= 4) {
                    $.queue(Div[0], "fx", function() {
                        $(this).hide("slow");
                        $.dequeue(this);
                    });
                } else {
                    $.queue(Div[0], "fx", function() {
                        $(this).html(Messages[i - 1]).hide("slow");
                        $.dequeue(this);
                    });
                }

                // display the new item
                $.queue(Div[0], "fx", function() {
                    $(this).html(Messages[i]).show("slow");
                    i = i++;
                    $.dequeue(this);
                });
            } else {
                // loop back and display the first item again
                $.queue(Div[0], "fx", function() {
                    i = 0;
                    $(this).html(Messages[i]).show("slow");
                    $.dequeue(this);
                });
            }
        });
    }

    // run it
    IntroText();
</script>

Answer 1

一种解决方案是使用setInterval()进行正确的循环。使用fadein() / fadeOut()和 modulo %显示和隐藏内容，您可以检查何时必须重启计数。 startMessage允许您从任何项目开始循环消息。

＆＃13;

/*
        Fade each above string in and out as content for the div sequentially
        in a loop
    */
    var Messages = [
        "Matured Dieting via Smartphone",
        "The Academic IQHE Diet",
        "For only R 400.00 / year",
        "Follow this super diet on mobile",
        "<a href=\"http://www.m.smartpeeps.co.za\">m.smartpeeps.co.za</a>"
    ];
    

   
    function IntroText() {
        var Div = $(".introText")
        var startMessage = 0;
        setInterval(function(){
          Div.html(Messages[startMessage]).fadeIn().delay(1000).fadeOut();
          startMessage++;
          if(startMessage % Messages.length == 0){
            startMessage=0;
          }
        },2000)
    }

    // run it
    IntroText();

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="introText" style="display:none"></div>

＆＃13;

在页面上显示数组内容，在jquery中有一个循环

1 个答案: