jQuery elimina la clase y agrega a otro div que no funciona: jquery, jquery-animate, addclass, removeclass

Tengo una galería de 3 imágenes alineadas al lado deEl uno al otro. Para empezar, la imagen central es grande y las 2 imágenes de cada lado son pequeñas. Cuando hace clic en la imagen de la izquierda (por ejemplo), la imagen del medio y la derecha se deslizan más de 100 px y la imagen de la izquierda se vuelve grande. Luego, por ejemplo, si vuelve a hacer clic en la imagen central, las 3 imágenes se deslizan hacia la derecha y la imagen central se vuelve grande de nuevo, y así sucesivamente.

El código que he escrito no parece funcionar hasta ahora, los divs externos se agrandan cuando se hace clic pero no se vuelven a contraer y el div medio nunca hace nada cuando se hace clic.

Alguien me puede decir qué es lo que está mal con mi código:

if($(".main_image").hasClass("active_image")){
$(".second_image").click(function () {
$("#images_holder").animate({
left: "+100"
});
$(".main_image").removeClass("active_image")    ;
$(this).addClass("active_image");
});
}
if($(".main_image").hasClass("active_image")){
$(".third_image").click(function () {
$("#images_holder").animate({
left: "-100px"
});
$(".main_image").removeClass("active_image")    ;
$(this).addClass("active_image");
});
}
if($(".second_image").hasClass("active_image")){
$(".main_image").click(function () {
$("#images_holder").animate({
left: "0px"
});
$(".second_image").removeClass("active_image")  ;
$(this).addClass("active_image");
});
}
if($(".second_image").hasClass("active_image")){
$(".third_image").click(function () {
$("#images_holder").animate({
left: "-100px"
});
$(".second_image").removeClass("active_image")  ;
$(this).addClass("active_image");
});
}
if($(".third_image").hasClass("active_image")){
$(".main_image").click(function () {
$("#images_holder").animate({
left: "0px"
});
$(".third_image").removeClass("active_image")   ;
$(this).addClass("active_image");
});
}
if($(".third_image").hasClass("active_image")){
$(".second_image").click(function () {
$("#images_holder").animate({
left: "+100px"
});
$(".third_image").removeClass("active_image")   ;
$(this).addClass("active_image");
});
}

Aquí hay un JSfiddle de mi trabajo: http://jsfiddle.net/QS3BW/3/

Respuestas

No puedes poner el if como eso. Es el evento que ejecuta un código. Cuando tenga el click Evento, puedes poner tu condicion.

Intenta con algo como esto:

$("#images_holder").children().click(function(){

// if has class run this code

// else if has this class, run this code

...

});