javascript - 如何将 fadeOut jQuery 属性与 Javascript 文本片段一起使用

Question

http://api.jquery.com/fadeOut/ <- 淡出 API

我正在尝试学习 Javascript，并且一直在玩在 Codepen 上找到的一个片段。

我在尝试获取随机文本数组片段以使文本在转换到另一个文本对象时淡出时遇到问题。现在，数组循环并使用 Math.Random 函数 (5*1) 从数组中随机选择一个字符串，每次加载新文本对象时它都会淡入，但是我希望它淡出，但我不这样做我认为我没有正确利用 .fadeOut 属性。我怎样才能让文本淡出，让文本淡入淡出，而不是淡入，瞬间杀死？

var textTimer;
var inTransition = false;

startTimer();

function startTimer() {
clearTimeout(textTimer);
textTimer = setTimeout(changeTitle, 3500);
}


changeTitle();
var titleNumber = Math.floor(Math.random() * 5) + 1;
function changeTitle() {
var titleArray = [
    "Test1",
    "Test2",
    "Test3",
    "Test4",
    "Test5"
];
var tempTitleLength = titleArray.length - 1;

if (inTransition == false) {
    inTransition = true;
    titleNumber++;
    if (titleNumber > tempTitleLength){
        titleNumber = 0
    }
    $('.text').html(''); 
    $('.text').css({opacity: '0'});
    $('.text').html(titleArray[titleNumber]);
    $('.text').fadeOut(); 
    $('.text').stop().delay(0).animate({
        opacity: 1
        }, 1500, function() {
            inTransition = false;
            startTimer.()
        });
}

}

谢谢! :D

HTML 非常简单

 <div class="text"></div>

Answer 1

多个问题:

$('.text').html(''); 
$('.text').css({opacity: '0'});
$('.text').html(titleArray[titleNumber]);

您已经删除了 html('') 中的文本而不淡出，将 css 不透明度设置为 0，没有任何延迟，设置 html 新文本没有任何动画。

还有一个语法错误startTimer.()我猜是拼写错误。

淡出完成后删除前 2 行并设置新文本。

在执行 fadeIn 之前，您还需要等待 fadeOut 完成。因此，顺序是:淡出、设置新文本、淡入。像这样:

    $('.text').fadeOut(1500, function () {
        $('.text').html(titleArray[titleNumber]);
        $('.text').fadeIn(1500, function () {
            inTransition = false;
            startTimer()
        });
    });

JSFiddle:http://jsfiddle.net/Dzyzw/