javascript - 淡入/淡出数组元素

Question

如何淡入和淡出数组元素？我在 JavaScript 中有一个包含三个元素的以下数组，并希望以几秒钟的延迟将它们逐个淡入 xor Out。

textlist = new Array( "news1", "news2","news3");

更新：数组项不是 id，这些是网站上出现的实际文本。

Answer 1

如果字符串是元素 id：

textlist = ["news1", "news2","news3"];
$.each(textlist, function(index, value){
    $('#' + value).delay(1000 * index).fadeIn();
});

• 第一个元素在 1000 * 0 = 马上淡入
• 第二个元素在 1000 * 1 = 一秒后淡入。
• 第三个元素在 1000 * 2 = 两秒后淡入。
• ...
• ...
• n元素在1000 * n = n秒后淡入。

现场演示

---

更新：

好的，您更新了数组中的元素不是ids 而是自由文本，因此您可以使用:contains选择器：

textlist = ["News 1", "News 2", "News 3"];
$.each(textlist, function(index, value) {
    $(':contains("' + value + '")').delay(1000 * index).fadeIn();
});​

现场演示

Answer 2

正如您所说，数组项是文本；所以你需要在页面的某个地方显示，例如在一个<div id='newsPanel'/>元素中。你可以试试：

var listTicker = function(options) {

    var defaults = {
        list: [],
        startIndex:0,
        interval: 3 * 1000,
    }   
    var options = $.extend(defaults, options);

    var listTickerInner = function(index) {

        if (options.list.length == 0) return;

        if (!index || index < 0 || index > options.list.length) index = 0;

        var value= options.list[index];

        options.trickerPanel.fadeOut(function() {
            $(this).html(value).fadeIn();
        });

        var nextIndex = (index + 1) % options.list.length;

        setTimeout(function() {
            listTickerInner(nextIndex);
        }, options.interval);

    };

    listTickerInner(options.startIndex);
}

var textlist = new Array("news1", "news2", "news3");

$(function() {
    listTicker({
        list: textlist ,
        startIndex:0,
        trickerPanel: $('#newsPanel'),
        interval: 3 * 1000,
    });
});​

在jsfiddle试试这个。

Answer 3

我认为这些值是元素的 ID。如果是这样，请尝试以下方法，

function fadeInOut(textlist) {
    $('#' + textlist.splice(0, 1)[0]).fadeIn(1000, function() {
        $(this).fadeOut(1000, function() {
            fadeInOut(textlist);
        });
    });
}

演示

Answer 4

HTML：

<div id="container"></div>

Javascript：

var textlist=new Array( "news1", "news2","news3");
var timer;

    function textFade(index){
       $("#container").fadeOut(200).html(text).fadeIn(200);
        timer = setTimeout(function() {
            textFade(text);

             },3000);
    }

    $(document).ready(function() {
        textFade(0);
    });