CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Dallby
Dallby

Reputation: 596

JS/JQuery hide element, change text, show element

I'm trying to achieve the following experience:

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

Upvotes: 2

Views: 78

Answers (2)

Dallby
Dallby

Reputation: 596

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

Upvotes: 0

Wowsk
Wowsk

Reputation: 3675

Use the complete parameter for the animate function. The code inside of the function will only execute when the animate function ends. 

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

Upvotes: 1

Related Questions