jQuery .animate/.each 链接

Posted 2023-05-09

【中文标题】jQuery .animate/.each 链接

【英文标题】：jQuery .animate/.each chaining

【发布时间】：2011-01-01 10:10:17

【问题描述】：

我正在尝试组合匹配的内容，例如：

$(".item").each(function(i) 
    //animation here
);

使用 jQuery 的固有链接功能，强制动画等待前一个动画完成，例如：

$(".item").each(function(i) 
    $(this).animate(marginLeft:"0", 60);
);

然后在动画完成后触发 .load 函数。基本上，我想按顺序淡出四个项目[一个接一个，而不是一次全部]，然后将四个新项目加载到同一个 div 中，替换前四个。

如何以可重用/可变的方式做到这一点？

【参考方案1】：

如何检查元素是否是最后一个，然后添加回调？

$(".item").each(function(i, elem) 
    var callback = $(elem).is(':last') ? function() 
        //dosomething
     : function();
    $(this).animate(marginLeft:"0", duration: 60, complete: callback);
);

【讨论】：

谢谢！只需要调整持续时间/回调部分的语法。

嗯，这似乎不起作用。打算玩一下，但如果你能改进，那就太好了。

【参考方案2】：

只需为动画指定回调并跟踪有多少项已淡出。然后，当它们都完成后，删除它们并添加新的。

var items = $('.item');
var parent = items.parent();
var itemCount = items.length;
items.each(function()

    $(this).fadeOut('medium', function()
    
        itemCount--;
        if (itemCount == 0)
        
            // Remove the items and add the new ones.
            items.remove();
            parent.append('...')
        
    );
);

【讨论】：

感谢您的帮助 - 投了赞成票，但最终标记为大卫的。

好的，终于有机会阅读这些了。这些都没有完成任务。 jQuery 的动画链接设置动画，使得一个必须在下一个开始之前完成。这就是我要找的：\

所以你要一个一个地淡出，然后一个个地添加？

是的，我已经附加了一个我写的解决方案，可以完成工作。

【参考方案3】：

$("#more:not(.disabled)").live("click", function(event) 
    event.preventDefault();

    var urlPieces = (event.target.href).split("/");
    var nextURL = urlPieces[urlPieces.length - 2] + "/" + urlPieces[urlPieces.length - 1];
    var items = $(".item");
    var itemCount = items.length;   

    items.each(function(i) 
        var passthru = this;
        window.setTimeout(function() 
            $(passthru).animate(opacity:"0", 60, function() 
                if (i == itemCount - 1) 
                    $("#browse").load(nextURL + " .item, #controls", fadeInNew);
                
            );
        , 60*i);
    );
);

fadeInNew 处理新的一个在其他地方淡入淡出，但这或多或少是我正在寻找的东西，它周围有一些额外的代码，也许可以阐明正在发生的事情（有一个带有 url 的下一个箭头在它的href中，如果javascript打开，我需要下一页相对于当前页面的URL，如果它关闭，它会将该url作为href并加载一个新页面，该页面在页面上具有相同的内容，但新页面除外本来是 $.load-ed 的项目。

【讨论】：

这个解决方案很糟糕，我知道。

【参考方案4】：

像这样更新延迟：

$(".item").each(function(i) 
    $(this).delay(200*i).animate(marginLeft:"0", 60);
);

ul li.item 
  margin-left: 50px;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li class="item">List 1</li>
  <li class="item">List 2</li>
  <li class="item">List 3</li>
  <li class="item">List 4</li>
  <li class="item">List 5</li>
  <li class="item">List 6</li>
</ul>

【参考方案5】：

我的贡献，基于@david-hellsing算法:)

function pop_in(array_elem, index) 
    $(array_elem[index]).animate(
        width: 'toggle',
        height: 'toggle'
    , 700)// callback will be a promise
    .promise()
    .then(() => 
        $(array_elem[index]).css(visibility: 'hidden'); //hide after reduce size

        if(index > 0)
            pop_in(array_elem, --index) //recursive call
        else
            console.log("Animation finished. Execute another function from here.");
    );

const items_menu = $(".item");
pop_in(items_menu, items_menu.length-1); //start from last to first element

请注意，您可以根据自己的目的更改宽度和高度属性。