CODEWITHSUNDEEP
jquerycss
Florin Simion
Florin Simion

Reputation: 458

jQuery text fade In/Out Loop issue

The following script runs well for the first time, but the second time goes a bit strange (to me)

HTML:

<div class='one'>Some text here</div>
<div class='two'>More text here</div>
<div class='three'>Third line of text</div>
<div class="four">another line</div>

CSS: 

div.two{ display:none}
div.three{ display:none}
div.four{ display:none}

And the JS:

window.switchOne = function () {
    $('.three').fadeToggle(function() {
        $('.one').fadeToggle(function() {
            setTimeout(window.switchTwo, 500);
        });
    });

}

window.switchTwo = function () {
    $('.one').fadeToggle(function() {
        $('.two').fadeToggle(function() {
            setTimeout(window.switchThree, 500);
        });
    });
}

window.switchThree = function () {
    $('.two').fadeToggle(function() {
        $('.three').fadeToggle(function() {
            setTimeout(window.switchFour, 500);
        });
    });
}



window.switchFour = function () {
    $('.three').fadeToggle(function() {
        $('.four').fadeToggle(function() {
            setTimeout(window.switchOne, 500);
        });
    });
}



setTimeout(window.switchTwo(), 500)

This is a codepen I've created: http://codepen.io/anon/pen/yOyKwp

What I'm missing?

UPDATE

Strange is that if i keep it to only 3 divs works well

http://codepen.io/anon/pen/LNEmZP

So anything more than 3 broke it.

Upvotes: 0

Views: 81

Answers (2)

RAJESH CHAUHAN
RAJESH CHAUHAN

Reputation: 89

Try This and also check your first codepen I have made changes:-

window.switchOne = function () {
    $('.four').fadeToggle(function() {
        $('.one').fadeToggle(function() {
            setTimeout(window.switchTwo, 500);
        });
    });

}

window.switchTwo = function () {
    $('.one').fadeToggle(function() {
        $('.two').fadeToggle(function() {
            setTimeout(window.switchThree, 500);
        });
    });
}

window.switchThree = function () {
    $('.two').fadeToggle(function() {
        $('.three').fadeToggle(function() {
            setTimeout(window.switchFour, 500);
        });
    });
}



window.switchFour = function () {
    $('.three').fadeToggle(function() {
        $('.four').fadeToggle(function() {
            setTimeout(window.switchOne, 500);
        });
    });
}





setTimeout(window.switchTwo(), 500);

Upvotes: 0

pokeymond
pokeymond

Reputation: 671

The problem is with this

window.switchOne = function () {
    $('.three').fadeToggle(function() {
        $('.one').fadeToggle(function() {
            setTimeout(window.switchTwo, 500);
        });
    });

}

that should be 

window.switchOne = function () {
    $('.four').fadeToggle(function() {
        $('.one').fadeToggle(function() {
            setTimeout(window.switchTwo, 500);
        });
    });

}

Because last visible is the class .four so you need to fadeToggle class .four not .three

So if you have 5 divs with the 5th div have a class .five, your window.switchOne should fadeToggle .five class, and so on...

Hope it helped.

Upvotes: 1

Related Questions