jQuery supprime la classe et ajoute à une autre div ne fonctionnant pas - jquery, jquery-animate, addclass, removeclass

J'ai une galerie de 3 images alignées à côté deL'un et l'autre. Pour commencer, l’image centrale est grande et les 2 images de chaque côté sont petites. Lorsque vous cliquez sur l'image de gauche (par exemple), les images du milieu et de la droite glissent au-dessus de 100 pixels et l'image de gauche s'agrandit. Ensuite, par exemple, si vous cliquez à nouveau sur l'image du milieu, les 3 images glissent vers la droite et l'image du milieu redevient grande, etc.

Le code que j’ai écrit ne semble pas fonctionner jusqu’à présent, les divs externes s’agrandissent lorsque vous cliquez dessus, mais ne rétrécissez plus et le div du milieu ne fait jamais rien lorsque vous cliquez dessus.

Quelqu'un peut-il me dire ce qui ne va pas avec mon code:

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

voici un JSfiddle de mon travail: http://jsfiddle.net/QS3BW/3/

Réponses:

Vous ne pouvez pas mettre le if comme ça. C’est l’événement qui exécute un code. Lorsque vous avez le click événement, vous pouvez mettre votre condition.

Essayez avec quelque chose comme ça:

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

// if has class run this code

// else if has this class, run this code

...

});