Fade In/Out an array elements

Question

How can I fade In and Fade Out array elements? I have got a following array with three elements in the JavaScript and want to Fade them In xor Out one by one with few seconds delay.

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

Update: Array items are not id's, these are actual text appearing on the website.

Answer 1

As you said the array items are text; So you need to show somewhere in you page, e.g in a <div id='newsPanel'/> element. You may try:

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

Try this at jsfiddle.

Answer 2

If the strings are the elements ids:

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

• The first element fades in after 1000 * 0 = right away
• The second element fades in after 1000 * 1 = One second.
• The third element fades in after 1000 * 2 = Two seconds.
• ...
• ...
• The n element fades in after 1000 * n = n seconds.

Live DEMO

---

Update:

O.K. you updated that the elements in the array are not the ids but a free text, so you can use the :contains selector:

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

Live DEMO

Answer 3

I presume those values are ID of an element. If so try something like below,

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

Answer 5

thats just what I was looking for. Thanks