JS/JQuery hide element, change text, show element

Question

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

Wowsk · Accepted Answer · 2016-04-07 00:11:44Z

1

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

answered Apr 7, 2016 at 0:11

Wowsk

3,6852 gold badges20 silver badges30 bronze badges

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

1 Comment

Dallby Over a year ago

Thanks for the help! :)

Dallby · Accepted Answer · 2016-04-07 00:12:26Z

0

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

answered Apr 7, 2016 at 0:12

Dallby

5964 silver badges20 bronze badges

Collectives™ on Stack Overflow

JS/JQuery hide element, change text, show element

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related