Adding cloneable elements in queue with a nice user feedback

Question

As providing user feedback i'd like to add a fade-in effect every time a new li element is cloned and added to the ul list.

var target = this;                                 // The <ul>
var clonable = target.children().first().detach(); // First <li>

$.each(arr, function(i, obj) { // Loop each array element and clone-add the <li>
   clonable.clone(true).appendTo(parent).hide().fadeIn('slow');
});

But elements are faded-in as a whole, not one at time. I've even tried to add delay(800) right after hide() but again, the delay and fade-in are affecting all new childs of <ul>.

How would you add this effect?

Answer 1

Not exactly sure what you're after, but I think you need to add a timer so that the elements are added one at a time. See if this fiddle is close to what you want: http://jsfiddle.net/qG8Dd/

$(function(){
    var idx=0;
    var LIs = $("#source li");
    var interval = window.setInterval(appender,1000);
    function appender(){  
        var li = $(LIs[idx++]);
        $("#dest").append(li);
        li.hide().fadeIn("slow");
        if (idx == LIs.length){
            window.clearInterval(LIs);
        }
    }       
});

Answer 2

Try this:

var target = this;                                 // The <ul>
var clonable = target.children().first().detach(); // First <li>

$.each(arr, function(i, obj) { // Loop each array element and clone-add the <li>
   var el = clonable.clone(true).appendTo(parent).hide();
   if ( i == 0 ) {
       showNext(el);
   }
});

function showNext(item) {
    $(item).fadeIn(function() {
        showNext($(this).next("li"));
    });
}