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

Question

我正在努力实现以下体验:

• 向下滑动文字隐藏
• 将文本更改为存储在数组中的值(在文本完全隐藏之前不要更改文本)
• 向上滑动文字显示

不断发生的是文本在元素完全隐藏之前发生变化。这是在页面加载时运行的函数...

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

Answer 1

使用动画函数的完整参数。函数内部的代码只会在动画函数结束时执行。

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