Question

我尝试连续显示fadein和fadeout的文字。以下是fiddle我的确切体验。

这是我在循环中获取消息的jquery

 (function() {

            var message = jQuery("#message_after_login");
            var message_index = 1;

            function shownextmessage() {
                ++message_index;
                message.eq(message_index % message.length)
                        .fadeIn(2000)
                        .delay(2000)
                        .fadeOut(2000, shownextmessage);
            }

            shownextmessage();

        })();

现在它看起来第一个消息本身像fadein和fadeout一样循环，但不是第二个消息。我不确定我错在哪里。

任何建议都会很棒。

Answer 1

您不能拥有2个具有相同ID的元素 - id必须是唯一的，您可以在此处使用class而不是id

<div class ="message_after_login">Testing for first message</div>
<div class = "message_after_login">This is for testing 2nd message</div>

然后

(function () {

    var message = jQuery(".message_after_login").hide();
    var message_index = -1;

    function shownextmessage() {
        ++message_index;
        message.eq(message_index % message.length)
            .fadeIn(2000)
            .delay(2000)
            .fadeOut(2000, shownextmessage);
    }

    shownextmessage();

})();

演示：Fiddle

Answer 2

您正在重复两个DOM的ID。

message_after_login使用class而不是ID。

Fiddle Demo

Answer 3

使用ID选择仅选择第一个元素。如果您在HTML中将其更改为使用class而不是id，则使用“。”而不是选择器中的“＃”它将起作用。

文本效果在jquery中没有正确循环

3 个答案: