Добавление клонируемых элементов в очередь с приятной обратной связью с пользователем

Question

В качестве обратной связи с пользователем я хотел бы добавлять эффект постепенного появления каждый раз, когда новый элемент li клонируется и добавляется в список ul.

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');
});

Но элементы постепенно исчезают в целом , а не по одному за раз. Я даже пытался добавить delay(800) сразу после hide(), но опять же, задержка и постепенное изменение влияют на всех новых потомков <ul>.

Как бы вы добавили этот эффект?

Answer 1

Попробуйте это:

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"));
    });
}

Answer 2

Не совсем уверен, что вы ищете, но я думаю, вам нужно добавить таймер, чтобы элементы добавлялись по одному за раз.Посмотрите, подходит ли эта скрипка к тому, что вы хотите: 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);
        }
    }       
});