Question

I’m trying to send an array through a jQuery function and have it animate each of the words in an array.

var foo = [];

foo[0]= "test1";
foo[1]= "test2";
foo[2]= "test3";

$(document).ready(function(){

  $(".ansy").click(function(){ 

    $.each(foo,function(){

      $('.message').animate({'opacity': 0}, 2000, function () {
        $(this).text("enter text or variable here");
      }).animate({'opacity': 1}, 2000);

    });
  }); 

});

I’m using a block of code I got from another place on stackoverflow that works when I replace the “enter text or variable here” with what ever text I want but can’t make go through an array. I’ve been trying to use the $.each function but I haven’t been able to get it to work. The idea is to have a string fade in and then fade out and then have the next string in the array fade in and so on until it reaches the end of the array. Any help would be great.

Answer 1

First, wrap the language construct array in a jQuery object so you get the methods of a jQuery Object:

$(foo)

Then use .each on your new jQuery array:

$(foo).each(function(

Make sure your function is passing the index and value parameters:

$(foo).each(function( i, v ){});

Then do your animations:

$( foo ).each(function( i, v ){
    $('.message')
        .animate({
            'opacity': 0
            },
            2000,
            function(){
                $(this).text(v);
            }
        )
        .animate({
            'opacity': 1
            },
            2000
        );
});

Notice I used v as the text value.

Be warned, .text() and .html() do different things. People usually want .html() unless they have a very specific reason for using .text(). Keep that in mind in case you run into any issues.