0

http://api.jquery.com/fadeOut/ <- fadeOut api

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

我在尝试让随机文本数组片段转换到另一个文本对象时让文本淡出时遇到问题。现在，数组循环并使用 Math.Random 函数（5 * 1）从数组中随机选择一个字符串，每次加载新文本对象时它都会淡入，但是我希望它淡出，我不不认为我正在正确使用 .fadeOut 属性。我怎样才能得到它，以便文本淡出，所以文本会淡入淡出，而不是淡入淡出，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>
4

3 回答 3

1

您的代码中有语法错误：您startTimer.()应该是startTimer()并且您没有startTimer使用}. 我为您更正了这一点，并设置了一个示例 JSFiddle 供您查看。似乎以其他方式工作。

这是示例 JSFiddle： 单击此处

于 2013-10-20T03:26:09.477 回答
1

这就是我认为你想要的——

  1. 设置初始文本。

  2. 淡出你的文字。

  3. 更改文本。
  4. 淡入新文本。
  5. 稍等片刻，然后返回步骤 2。

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

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

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

于 2013-10-20T03:29:39.033 回答
1

多个问题：

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

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

还有一个语法错误startTimer.()，我猜也是错字。

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

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

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

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

于 2013-10-20T03:38:51.447 回答