Question

http://api.jquery.com/fadeOut/＆lt; - fadeOut api

我正在尝试学习Javascript，而且我一直在使用我在Codepen上找到的代码片段。

当我转移到另一个文本对象时，我无法让随机文本数组片段中的文本为fadeOut。现在，数组循环并使用Math.Random函数（5 * 1）从数组中随机选择一个字符串，并且每次加载一个新的文本对象时它都会淡入，但我希望它淡出，我不要我认为我正在正确使用.fadeOut属性。我怎样才能得到文本fadesOut，所以文本fadeIn fadeOut，而不是fadeIn，insta kill？

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

您的代码中存在语法错误：您startTimer.()应该是startTimer()而您没有使用startTimer关闭}函数。我为你纠正了这个问题并设置了一个样本JSFiddle供你查看。似乎在另外工作。

以下是JSFiddle示例：CLICK HERE

Answer 2

这就是我认为你想要的 -

设置初始文字。
淡出你的文字。
更改文字。
淡入新文字。
稍等片刻，然后返回第2步。

我会删除所有转换标志，并使用fadeOut和fadeIn完成后从一步到另一步移动时触发的可选回调函数，例如。

$('.text').fadeOut(1000, function() {
   $('.text').html(get_next_word());
   $('.text').fadeIn(500);
});

只需在1500毫秒+您希望文本完全可见的计时器上关闭它。

Answer 3

多个问题：

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

您已经删除了html（''）中的文字而没有淡出，将css opacity设置为0，没有任何延迟，设置html新文本而不进行任何动画。

还有语法错误startTimer.()我猜错了。

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

您还需要在执行fadeIn之前等待fadeOut完成。所以，序列：fadeOut，设置新文本，淡入淡出。像这样：

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

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

如何使用Javascript Text Snippet使用fadeOut jQuery属性

3 个答案: