JS/JQuery hide element, change text, show element

I'm trying to achieve the following experience:

  • Slide down text to hide
  • Change the text to value stored in an array (Do not change text until text is fully hidden from view)
  • Slide up text to show

What keeps happening is the text is changing before the element is fully hidden. Here is the function which runs on page load...

var welcomeText = function() {
var welcome = ["Bienvenue.", "Willkommen.", "Benvenuto.", "Bienvenido.", "Welkom", "??", "F?ilte.", "Nau mai", "Welcome."],
    title = $(".home-title"),
    counter = 0;

setInterval(function() {
    title.animate({"bottom":"-100%"},200);
    title.text(welcome[counter]);
    counter++;
    title.animate({"bottom":""},200);
    if(counter >= welcome.length) {
        counter = 0;
    }
}, 3000);
}

Answers 1

  • Wow, the answer just came to me like a flash of inspiration! I had to add a time delay to the text change. here is the working solution...

    var welcomeText = function() {
    var welcome = ["Bienvenue.", "Willkommen.", "Benvenuto.", "Bienvenido.", "Welkom", "??", "F?ilte.", "Nau mai", "Welcome."],
        title = $(".home-title"),
        counter = 0;
    
    setInterval(function() {
        title.animate({"bottom":"-100%"},200);
        setTimeout(function() {
            title.text(welcome[counter]);
        }, 200);
        counter++;
        title.animate({"bottom":""},200);
        if(counter >= welcome.length) {
            counter = 0;
        }
    }, 3000);}
    

Related Articles