jQuery - each function

Question

Hi there

I currently have a list of thumbnails that is located in a ul tag as li's.

I am using the Galleria image gallery, but I have more than six images in my gallery, so am I trying to implement a page system.

What I am trying to do is the following:

I have a row of images, row1, when you click on page 2 row1 should hide using this function hide("slide"), and after all of them have hid, row2 should show using show("slide"), but these hide and show functions occur at the same time, I want the hide function to finish before the show function executes, here is my code:

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

How can I have the hide function execute while the show function waits for a go ahead?

// edit

I have changed my code to the following:

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

But now, the show function runs exactly the number of times as the number of li's that was visible on the previous 'page'. How can I have that function execute only once?

Answer 1

Use your call-backs. They run immediately after an effect is finished.

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

Answer 2

Please try changing this:

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

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

to this:

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

Answer 3

Solved it like so:

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

Thanks for all the help everyone!