在队列中添加可克隆元素并提供良好的用户反馈

发布于 2024-12-29 13:42:23 字数 583 浏览 1 评论 0原文

在提供用户反馈时，我想在每次克隆新的 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');
});

但元素是作为一个整体淡入的，而不是一次淡出的。我什至尝试在 hide() 之后添加 delay(800) 但同样，延迟和淡入会影响 的所有新子项。 ul>。

您将如何添加此效果？

原文

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?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

谈情不如逗狗 2025-01-05 13:42:23

不太确定您想要什么，但我认为您需要添加一个计时器，以便一次添加一个元素。看看这个小提琴是否接近您想要的：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);
        }
    }       
});

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

回复收藏 0 原文

草莓酥 2025-01-05 13:42:23

试试这个：

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

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

回复收藏 0 原文

~没有更多了~