Jquery Animation callback affecting the wrong elements

Question

Hey I trying to make a sort of slider but having a problem getting the loop to 'reset'. The idea is to have the elements animated to fade opacity and when finished make them hidden so that the ".is(:visible)" won't be triggered after the loop has been reset. However the callback function is affecting the elements that are having their opacity animated to '1', and at the wrong time. I'm guessing it's something simple that I don't know about animations yet as I'm a bit of a jQuery newb.

    $('a#galleryArrow').bind('click', function(){

      wrapper.children().slice(imageSet,(imageSet + 5)).animate({opacity: 0}, function() {$(this).hide();});

      if (wrapper.children(':last-child').is(':visible')) { imageSet = 0; } 
      else { imageSet = imageSet + 5; }

      wrapper.children().slice(imageSet, (imageSet + 5)).css({display: 'block'}).animate({opacity: 1});
      wrapper.animate({left: -(imageSet * 104)});          

      return false; 

});

Answer 1

First try moving the second animate to inside the first animate callback so they wont conflict.

$('a#galleryArrow').bind('click', function(){

      wrapper.children()
             .slice(imageSet,(imageSet + 5))
             .animate({opacity: 0}, function() {

                $(this).hide();

                if (wrapper.children(':last-child').is(':visible')) { 
                    imageSet = 0; 
                } 
                else { 
                    imageSet = imageSet + 5; 
                }

                wrapper.children()
                       .slice(imageSet, (imageSet + 5))
                       .css({display: 'block'})
                       .animate({opacity: 1});

                wrapper.animate({left: -(imageSet * 104)});    

          });

      return false; 

});