Question

我一直在尝试各种各样的事情，但是使用javascript和jquery是新的我似乎无法获得像这样工作的微不足道的东西。我的下面的代码正在运行，但我希望它能够在更改之间顺利地交叉淡入淡出。

var texts = ["One", "Two", "Three", "Four"];
var count = 0;
function addText() {
    $("#user").text(texts[count]).fadeOut();
    $("#user").text(texts[count]).fadeIn();
    count < 4 ? count++ : count = 0;
}
setInterval(addText, 500);

Answer 1

var texts = ["One", "Two", "Three", "Four"];
var count = 0;
function addText() {
    $("#user").text(texts[count]).fadeOut().delay(1).fadeIn();
    count < 4 ? count++ : count = 0;
}
setInterval(addText, 500);

更新：

一个改进的函数，它从@adricadar

中获取了几个提示

var texts = ["One", "Two", "Three", "Four"];
var count = 0;
var interval = 2000;

function addText() {
    $("#user").fadeTo(interval/2 -1, 0.01, function(){
       // this callback runs when fadeOut is finished
       // so that the text change is "invisible"
       $(this).text(texts[count]); 
    }).delay(1).fadeTo(interval/2, 1);
    // Note that arrays are zero indexed so "Four" would blink twice. 
    count < texts.length ? count++ : count = 0; 
}
setInterval(addText, interval);

http://jsfiddle.net/736vb5tk/1/

Answer 2

在这里，jsfiddle，我根据您的代码附加了一个带有演示的链接。

var texts = ["One", "Two", "Three", "Four"];
var count = 0;
var interval = 2000;
function addText() {
    $("#user").text(texts[count]).fadeOut(interval / 2);
    $("#user").text(texts[count]).fadeIn(interval / 2);
    count < 4 ? count++ : count = 0;
}
setInterval(addText, interval);

Answer 3

诀窍是使用fadeOut方法的回调。

$("#user").text(texts[count])
  .fadeOut( interval/2,
            function(){$("#user").text(texts[count]).fadeIn(interval/2);} );

JsFiddle

Javascript：文本更改之间的交叉淡化文本？

3 个答案: