Javascript淡入和淡出不同时代

Question

我一直在用这段代码来淡入和淡出文本。我偶尔会用它来做新闻播报，但有些标题会比其他标题长得多，而且用户需要更多的时间来阅读。是否有办法为每一次褪色设定不同的时间？

 <script>
    var counter = 0;

    function changeText()
    {
    var quotes = new Array();

    quotes[0] = "quote1";
    quotes[1] = "quote2";
    quotes[2] = "quote3";
    quotes[3] = "quote4";
    quotes[4] = "quote5";

    if (counter > 4)
        {
        counter = 0;
        }

    document.getElementById("textslide").innerHTML = quotes[counter];

    setTimeout(function(){changeText()},1000);
    counter ++;
    }
    </script>

Answer 1

试试这个(小提琴)：

var counter = 0;

function changeText()
{
    // Use an array of objects so each quote can have it's own display duration
    var quotes = new Array();
    quotes[0] = { text: "quote1", time: 500 };
    quotes[1] = { text: "quote2", time: 500 };
    quotes[2] = { text: "quote3", time: 500 };
    quotes[3] = { text: "quote4", time: 500 };
    quotes[4] = { text: "much longer quote", time: 2000 };

    // get the current quote
    var quote = quotes[counter];

    document.getElementById("textslide").innerHTML = quote.text;

    setTimeout(function(){changeText()}, quote.time);
    counter ++;

    // You probably want to reset your counter here
    if (counter > 4) {
        counter = 0;
    }
}