Fade in and out text and repeat

Asked Jan 27 '18 at 21:20

Active Jan 27 '18 at 21:37

Viewed 51 times

I'm trying to adapt the code from this answer, however I can't get it to work like I would like it to.

I have some text in a <p> and I would like to have this text replaced with some other text and then repeat.

E.g. text1 > > text2 > > text1>...

I don't need any button or slider, just the fade-in, fade-out.

Thanks in advance!

My code:

HTML

<div class="fadey">Hallo</div>
<div class="fadey">Bonjour</div>

CSS

.myFade {
    position: absolute;
    height: 50px;
    width: 50px;
}

$(document).ready(function () {
    var faderIndex = 0,
        faderOutSpeed = 2000,
        faderInSpeed = 3000,
        faders = $('.fadey');

    function nextFade() {
        $(faders[faderIndex]).fadeOut(1000, function () {
            faderIndex++;
            if (faderIndex >= faders.length) faderIndex = 0;
            $(faders[faderIndex]).fadeIn(1000, nextFade);
        });
    }
    nextFade();
});

How can I add a delay that let's the text stay a little longer visible before vanishing?

edited Jan 27 '18 at 21:37

asked Jan 27 '18 at 21:20

ersbygre1

What issue are you having adapting the code? – guest271314 Jan 27 '18 at 21:21
you want to cycle through a fixed set of texts? Are the texts of equal length? – le_m Jan 27 '18 at 21:23
@guest271314 I don't really have experience with js, so even switching from button/slider to fixed value is complicated :/ – ersbygre1 Jan 27 '18 at 21:25
@le_m Yes, approximately, but not exactly. I intend to rotate between different languages, so the texts won't have the same length. – ersbygre1 Jan 27 '18 at 21:25
share your code – Sanchit Patiyal Jan 27 '18 at 21:28
@SanchitPatiyal http://jsfiddle.net/KYaAj/1/ – ersbygre1 Jan 27 '18 at 21:29

Fade in and out text and repeat

0 Answers0