JavaScript Text Transition

Question

I am attempting to make a slideshow out of text, wherein one piece of text fades out, and another fades in, and so on. I have it working for the most part, but there is a small issue.

When the page is first loaded, all of the pieces of text are displayed at once. Each one fades in turn, and once they have all faded once they function as I want. I have used:

(function langFade() {

var lang = $('.lang, .first');
var langIndex = -1;

function showNextLang() {
    ++langIndex;
    lang.eq(langIndex % lang.length)
        .fadeIn(1500)
        .delay(2000)
        .fadeOut(1500, showNextLang);
}

showNextLang();

})();

as described here, but this is causing the problem described above. I've attempted using CSS to hide all but the first piece of text when the site is loaded, but this isn't doing the trick. My suspicion is that the issue is with the HTML - it is rather different to the demo. I have created a fiddle to demonstrate what I mean.

Is there any way of fixing this, either through modifying the JavaScript, or the HTML?

Mark Olsen · Accepted Answer · 2013-12-04 22:26:01Z

3

Try to hide the others at first with .not(':eq(0)').hide()

(function langFade() {

var lang = $('.lang, .first'),
    langIndex = -1;

lang.not(':eq(0)').hide();

function showNextLang() {
    ++langIndex;
    lang.eq(langIndex % lang.length)
        .fadeIn(1500)
        .delay(2000)
        .fadeOut(1500, showNextLang);
}

showNextLang();

})();

Can also use .not(':first').hide() which may be a little easier to read.

edited Dec 4, 2013 at 22:26

answered Dec 4, 2013 at 22:09

Mark Olsen

9597 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Comfortably Numb · Accepted Answer · 2013-12-04 22:14:05Z

1

Just hide them initially. And this can be done in pure CSS. Add following class:

h2.first, h2.lang {
    display: none 
}

Demo: http://jsfiddle.net/XbWJS/2/

answered Dec 4, 2013 at 22:14

Comfortably Numb

39.9k17 gold badges82 silver badges147 bronze badges

Collectives™ on Stack Overflow

JavaScript Text Transition

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related