How to make a text transition (in array) inside an HTML element with fade and delay?

Question

How to make a text transition (in array) inside an HTML element with fade and delay?

Navigation

#1 by (2 votes)

0

In short, I want an algorithm similar to the subtitle transition but no audio or video, just a text transition with delay and fade .

Scenery:

I have a array with 20 arrays , each array consists of 2 values: the first containing the string of the caption and the second containing the delay in milliseconds .

ps : The reason for this structure is to facilitate maintenance through JSON.

Example:

  var arrLegendas = [
                        ["legenda 1, blablalba", 2000],
                        ["legenda 2, blablalbaaldaldald", 4000],
                        ["legenda 3, bla", 1000],
                        ["legenda 4, blablalbaasdasd", 3000],
                    ]

I tried this and almost succeeded . It works perfectly if you remove the fades (only the transition of the texts 'solid'). With the fades, after the tenth transition (approximately), the texts begin to be placed after the fade do not know why.

javascript fade

asked by anonymous 21.02.2015 / 02:55

1 answer

Drawing through a .txt Refresh layout from a button

score 2 · Accepted Answer

The solution follows each element with its respective transition time:

$(document).ready(function() {
  var items = [["Two",2000], ["Three",3000], ["Four",4000], ["Five",5000], ["Six",6000], ["One",1000]];
  var $text = $('#div1 span');

  function loop(index) {
    $text.html(items[index][0]);
    $text.fadeIn();
    $text.delay(items[index][1]).fadeOut(function(){
        if(index < (items.length - 1)){
            loop(++index);
        }
        else loop(0);
    });
  }

  loop(0);
});

link