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

Asked

Viewed 334 times

0

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

Setting:

I have a array jagged with 20 arrays, each array is composed of 2 values: first containing the string of the legend and the according to 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 that and almost succeeded. It works perfectly if you take out the Fades (only the transition of the texts 'solida'). With the Fades, after the tenth transition (approximately), the texts begin to be placed after the fade I don’t know why.

javascript fade transition

  • see if this helps you http://jsfiddle.net/W47QV/4/

  • @kabstergo Each legend has to have its own time of duration. I tried to adapt but it didn’t work http://jsfiddle.net/W47QV/286/

1 answer

2


Follow the solution 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);
});

http://jsfiddle.net/hs0x7jey/

Browser other questions tagged javascript fade transition

You are not signed in. Login or sign up in order to post.