配列要素をフェードイン/アウト

Question

どのようにフェードアウト配列要素をフェードインできますか？私は、JavaScriptで3つの要素を持つ次の配列を持っていますし、数秒遅れて1つずつxor Outでそれらをフェードしたいと思います。

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

更新：配列項目は、これらのウェブサイト上で表示される実際のテキストは、IDがありません。

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の要素は、* 1〜1000 = 1秒後にフェード。
• 3番目の要素は、1000 * 2 = 2秒後にフェードインします。
• ...
• ...
• N要素1000 * N = N秒後にフェードイン。

Live DEMO

---

更新：

O.K.

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

Live DEMO

Answer 3

私はこれらの値は、要素のIDです推測：あなたは:containsセレクターを使用できるように、配列内の要素が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); 
    });