jQuery .animate/.each链接 [英] jQuery .animate/.each chaining

问题描述

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

I'm trying to combine matching something like:

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

具有jQuery固有的链接功能，可强制动画等待上一个动画完成，例如:

with jQuery's inherent chaining functionality that forces the animation to wait until the previous animation has completed, e.g.:

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

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

And then trigger a .load function after the animations have completed. Basically, I want to fade four items out in order [one after the next, not all at once], then load four new items into the same div, replacing the first four.

我该如何以可重用/可变的方式执行此操作?

How can I do this in a reusable/variable way?

推荐答案

$("#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.

fadeInNew handles the new one by one fade in elsewhere, but this was what I was looking for more or less with a bit of extra code around it to maybe shed some light on what was happening (there's a next arrow with a url in its href, if javascript is on, I need the URL of the next page relative to the current, if it's off, it follows that url as an href and loads a new page which has the same content on the page except for the new items that would have been $.load-ed.

这篇关于jQuery .animate/.each链接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！