javascript - 配列要素のフェードイン/フェードアウト

Question

配列要素をフェードインおよびフェードアウトするにはどうすればよいですか? JavaScript に 3 つの要素を持つ次の配列があり、数秒の遅延で 1 つずつ Fade In xor Out したいと考えています。

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

更新:配列の項目は ID ではなく、Web サイトに表示される実際のテキストです。

Answer 1

あなたが言ったように、配列項目はテキストです。したがって、ページのどこかに、たとえば<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 2

文字列が要素 ID の場合:

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

• 最初の要素は 1000 * 0 = すぐにフェードインします
• 2 番目の要素は 1000 * 1 = 1 秒後にフェードインします。
• 3 番目の要素は 1000 * 2 = 2 秒後にフェードインします。
• ...
• ...
• n要素は1000 * n = n秒後にフェードインします。

ライブデモ

---

アップデート：

OK、配列内の要素はids ではなくフリー テキストであることを更新したので、:containsセレクターを使用できます。

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

ライブデモ

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