Javascript JS/JQuery隐藏元素、更改文本、显示元素

我正在努力获得以下经验：

• 向下滑动要隐藏的文本
• 将文本更改为存储在数组中的值（在文本完全从视图中隐藏之前不要更改文本）
• 向上滑动要显示的文本

一直发生的事情是，在元素完全隐藏之前，文本正在更改。下面是在页面加载时运行的函数

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

---

为动画功能使用完整参数。函数内部的代码仅在动画函数结束时执行

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

---

哇，我突然想到了答案，就像灵感的一闪！我不得不给文本更改增加一个时间延迟。这是有效的解决方案

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

---

谢谢你的帮助！：）