Question

Hi I have a function that I want to loop around using a different ID tag each time. This function is called when the navigation link is clicked. So far I have this and I would like to change txt1 to txt2 then txt 3 and up to txt5 thus playing each animation one after each other. Thanks!

function animetxt(){
$o=$("#txt1");
$o.html($o.text().replace(/([\S])/g,'<span>$1</span>'));
$o.css('display','inline-block');
$('span',$o).stop().css({position:'relative',
                         display:'inline-block',
                         opacity:0,
                         fontSize:84,
                         top:function(i){return Math.floor(Math.random()*500)*((i%2)?1:-1);},
                         left:function(i){return Math.floor(Math.random()*500)*((i%2)?1:-1);}
                        }).animate({opacity:1,fontSize:20,top:0,left:0},1000);}

Answer 1

I would create an array with all the Ids and iterate over them using $.each:

$.each(['txt1', 'txt2' ], function(index, value) { 
  animetxt(value);  
});

(note that you can either type the Ids or use any selector)

function animetxt(id){
$o=$("#" + id);
$o.html($o.text().replace(/([\S])/g,'<span>$1</span>'));
$o.css('display','inline-block');
$('span',$o).stop().css({position:'relative',
                         display:'inline-block',
                         opacity:0,
                         fontSize:84,
                         top:function(i){return Math.floor(Math.random()*500)*((i%2)?1:-1);},
                         left:function(i){return Math.floor(Math.random()*500)*((i%2)?1:-1);}
                        }).animate({opacity:1,fontSize:20,top:0,left:0},1000);}

Note: You could also use a for loop and concat the index to the id

Edit: Call the functions sequentially

As @FAngel pointed out the code above executes all at once. For a sequential execution use the function below.

This new function uses the complete callback of animation and calls itself. It stops when the next id can’t be found.

You start it off like this:

 $(function() {
      animetxt(1);
    });

Here is the function:

function animetxt(id) {
    $o = $('#txt' + id);
    if (!$o.length) return;

    $o.html($o.text().replace(/([\S])/g, '<span>$1</span>'));
    $o.css('display', 'inline-block');
    $('span', $o).stop().css({
        position: 'relative',
        display: 'inline-block',
        opacity: 0,
        fontSize: 84,
        top: function(i) {
            return Math.floor(Math.random() * 500) * ((i % 2) ? 1 : -1);
        },
        left: function(i) {
            return Math.floor(Math.random() * 500) * ((i % 2) ? 1 : -1);
        }
    }).animate({
        opacity: 1,
        fontSize: 20,
        top: 0,
        left: 0
    }, {
        complete: function() {
            id++;
            animetxt(id);
        }
    }, 1000);
}​

Try it:

http://jsfiddle.net/ureyes84/ndScp/