Question

如何淡入和淡出数组元素？我在JavaScript中有一个包含三个元素的跟随数组，并希望逐个淡化它们，只需几秒延迟。

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 秒后淡入。

Live DEMO

<强>更新

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

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

Live DEMO

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);
        });
    });
}

DEMO

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);
    });

淡入/淡出数组元素

4 个答案: