Loop and Animate Elements of an Array using jQuery

I stumbled across a recent thread where a user wanted to loop through an Array using jQuery and show the display the elements similar to a slide show. He wanted to avoid using the for loop and wanted to do it jQuery style. Here’s how to use the $.each() to achieve this requirement:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Loop through an array using jQuery</title>
    <script src="http://code.jquery.com/jquery-latest.js"    
    type="text/javascript"></script>
    <script type="text/javascript">
        var arrNames = ['Tom', 'Jane', 'Harry', 'Rick', 'Moby'];

        $.each(arrNames, function(i, val) {
            setTimeout(function() {
                $('#divDisp').fadeOut("slow", function() {
                    $(this).text(val).fadeIn("slow");
                });
            }, i * 3000);
        });
    </script>
</head>
<body>
<div id='divDisp'></div>
</body>
</html>

You can see a Live Demo.

2 comments:

  1. Brian JørgensenSeptember 5, 2009 at 4:19 PM

    Maybe this could be useful. Thank you. :-)

    ReplyDelete
  2. AnonymousDecember 22, 2012 at 11:14 PM

    This is really a good / simple code to work with. I want to know how can i use this as recursive function. I mean how can we move text again & again.

    Please help.

    ReplyDelete