Show values from array in jquery

Question

Ok, the title might make it sound easy (and maybe it is), but I can't figure out how to show values from an array, not just do a each with them, but put them on the site slowly, with a nice effect...

Like this Twitter widget, but from an array (maybe wait 2sec, and when throw another value from the array)?

My array contains another array, with 4 values, is it possible to show the first 2 values, wait about 2 sec, and then show the last 2 values? Now when the last two values is out (from the prev array), wait 2 more seconds, and show the next array (again with four values, first show 2, wait 2 sec, and show the next 2, and so on...)

T.J. Crowder · Accepted Answer · 2012-04-25 20:14:04Z

4

You can do this easily using setInterval or a chained series of setTimeout. I tend to prefer the latter, which looks something like this:

function showValues(a, delay) {
    var index = 0;

    if (a.length !== 0) {
        // If you want a delay before the first one:
        setTimeout(showValue, delay);

        // Alternately, if you want to show the first right away
        // showValue();
    }

    // Function to show one value
    function showValue() {
        // Get the value
        var value = a[index++];

        /* ...show the value however you see fit... */

        // Schedule next display, if any
        if (index < a.length) {
            // Schedule next run
            setTimeout(showValue, delay);
        }
    }
}

Usage:

showValues(["value1", "value2", /* etc. */, 2000); 2000 = two seconds

Live example | source

edited Apr 25, 2012 at 20:14

answered Apr 25, 2012 at 20:08

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

T.J. Crowder Over a year ago

@Moiblpadde: It's just an extension of the same technique.

Mobilpadde Over a year ago

Awesome! Figured it out :D I feel kinda stupid right now D: (Was pretty simple through, once I took a look at the code :3) Final code

T.J. Crowder Over a year ago

@Moiblpadde: Good deal! Glad that helped.

ThiefMaster · Accepted Answer · 2012-04-25 20:10:08Z

4

Animation functions like fadeIn() make use of the jQuery FX queue so you can use .delay() in the call chain to delay the calling of these functions. In the following example one element is shown every second.

var data = ['foo', 'bar', 'foobar', 'moo', 'meow', 'xxx'];
var list = $('ul');
$.each(data, function(i, value) {
    $('<li/>', { text: value }).hide().appendTo(list).delay(i * 1000).fadeIn();
});

Demo: http://jsfiddle.net/ThiefMaster/frW8s/

answered Apr 25, 2012 at 20:10

ThiefMaster

320k85 gold badges608 silver badges648 bronze badges

Collectives™ on Stack Overflow

Show values from array in jquery

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related