JQuery Animation callback afetando os elementos errados - javascript, jquery, jquery-animate

Ei, eu estou tentando fazer uma espécie de controle deslizante, mas tendoum problema ao obter o loop para "redefinir". A idéia é ter os elementos animados para diminuir a opacidade e, quando terminar, ocultá-los para que o ".is (: visible)" não seja acionado após o loop ter sido redefinido. No entanto, a função de retorno de chamada está afetando os elementos que são tendo sua opacidade animada para "1" e na hora errada. Acho que é algo simples que ainda não conheço animações, já que sou um novato no jQuery.

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

});

Respostas:

Primeiro, tente mover o segundo animado para dentro do primeiro retorno de chamada animado, para que eles não entrem em conflito.

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

});