CODEWITHSUNDEEP
javascriptjquery
Vignesh Pichamani
Vignesh Pichamani

Reputation: 8070

Text effect not looping properly in jquery

I tried to show the text with fadein and fadeout continuously. Here is the fiddle what i experience exactly.

Here is the jquery that i get the message in loop 

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

        })();

Right now it appear first message itself looping like fadein and fadeout, but not the second message. I am not sure where i did mistake.

Any suggestion would be great.

Upvotes: 2

Views: 67

Answers (3)

Brett
Brett

Reputation: 897

Selecting using the ID only selects the first element. If you change it to using class instead of id in your HTML, then use "." instead of "#" in your selector it will work.

Upvotes: 1

Dipesh Parmar
Dipesh Parmar

Reputation: 27364

You are repeating ID for two DOM.

message_after_login use class instead of ID.

Fiddle Demo

Upvotes: 2

Arun P Johny
Arun P Johny

Reputation: 388316

You cannot have 2 elements with same id - id must be unique, you can use class instead of id here

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

then

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

})();

Demo: Fiddle

Upvotes: 2

Related Questions