jQuery - 每个函数答案

【问题标题】：jQuery - each functionjQuery - 每个函数
【发布时间】：2009-12-19 08:01:29
【问题描述】：

我目前有一个位于ul 标记中的缩略图列表，即li's。

我正在使用Galleria 图片库，但我的图片库中有超过六张图片，所以我正在尝试实现一个页面系统。

我想要做的是：

我有一排图片，row1，当你点击第2页时row1应该使用hide("slide")这个功能隐藏，在它们都隐藏之后，row2应该使用show("slide")显示，但是这些hide 和show 函数同时发生，我希望hide 函数在show 函数执行之前完成，这是我的代码：

$("a[href^='#']").click(function() {
    if (($(this).attr("href") == "#") && ($(this).attr("rel") != "gallery") && ($(this).attr("href").indexOf("row") < 0)) {
        return false;
    }
    else if ($(this).attr("href").indexOf("row") < 0) {
        $.scrollTo($(this).attr("href"),1000);
        return false;
    } else {
        var href = $(this).attr("href");
        href = href.replace("#","");
        $("ul.galleria li").each(function() {
            if ($(this).is(":visible")) {
                $(this).hide("slide");
            }
        }).;

        $("ul.galleria li."+href).each(function() {
            $(this).show("slide", 800);
        });
        return false;
    }
});

如何在 show 函数等待执行时执行 hide 函数？

// 编辑

我已将代码更改为以下内容：

$("ul.galleria li:visible").hide("clip", {direction : "horizontal"},function(){
    $("ul.galleria li."+href).show("clip", {direction : "horizontal"}, 800);
});

但是现在，show 函数运行的次数与上一个“页面”上可见的li 的数量完全相同。我怎样才能让那个函数只执行一次？

【问题讨论】：

标签： jquery jquery-ui jquery-plugins javascript

【解决方案1】：

使用您的回电。它们在效果完成后立即运行。

$(".item1").slideUp("fast", function(){
  // this is the callback. It will run only when .slideUp completes
  $(".item2").slideDown("fast");
});

【讨论】：

【解决方案2】：

请尝试更改：

$("ul.galleria li").each(function() {
                if ($(this).is(":visible")) {
                        $(this).hide("slide");
                }
        }).;

        $("ul.galleria li."+href).each(function() {
                $(this).show("slide", 800);
        });

到这里：

    $("ul.galleria li:visible").hide("slide",function(){
            $("ul.galleria li."+href).stop().show("slide", 800)
     });

【讨论】：

谢谢，这正是我想要的，但是show 函数执行了六次，你知道为什么吗？
你可能需要放置一个 stop() 因为它建立了一个队列（你有六个 :visible 元素对吗？）。我会更新代码。

【解决方案3】：

这样解决了：

var counter = 0;
$("ul.galleria li:visible").hide("blind", {direction : "horizontal"},function(){
    counter++;
    if (counter <= 1) {
        $("ul.galleria li."+href).show("blind", {direction : "horizontal"}, 800);
    }
});

感谢大家的帮助！

【讨论】：