Delayed JSON feeder

by nosfan1019

HTML

<a href="#">click</a>
<br><br>
<div class="feeder"></div>

CSS

body {
    margin: 50px;
}
.feeder {
    font-weight: bold;
}
.feeder p {
    background: pink;
    margin: 3px 0;
    padding: 2px 5px;
}

JavaScript

var data = [
    {'Name': 'Joe'},
    {'Name': 'Mary'},
    {'Name': 'Chris'},
    {'Name': 'Bob'},
    {'Name': 'Sarah'},
    {'Name': 'Ashley'},
    {'Name': 'Brett'},
    {'Name': 'Jared'},
    {'Name': 'Tiffanie'},
]

$('a').click(function() {
    $('.feeder').empty();
    $.each(data, function(i, item) {
        //var boo = (100-(i*10))/100;
        $('.feeder').delay(200).fadeIn(function() {
            //$(this).append('<p style="opacity:'+boo+'" >' + data[i].Name+'</p>');
            $(this).append('<p>' + data[i].Name+'</p>');            
        });
    });
});