jQuery - каждая функция

Question

В настоящее время у меня есть список миниатюр, который находится в теге ul как li.

Я использую галерею изображений 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 ожидает продолжения?

// редактировать

Я изменил свой код на следующий:

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

Но теперь функция show запускается ровно столько раз, сколько li было видно на предыдущей «странице». Как я могу выполнить эту функцию только один раз?

Answer 1

Используйте ваши обратные вызовы. Они запускаются сразу после завершения эффекта.

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

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

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

Спасибо всем за помощь всем!