Remplacer l'animation .hover par une animation .click?

Question

Je suis assez nouveau pour jquery et tout type de programmation d'ailleurs.

Existe-t-il un moyen d'écraser .hover lorsqu'un utilisateur clique sur un objet? J'essaie d'avoir une image qui reste à la largeur animée quand on clique dessus et je ne reviens pas à sa taille d'origine quand je la planque.

Voici ce que j'ai jusqu'à présent:

$(function() { 
    $("#eggroll2, #eggrollL2").hover(function() { 
     $(this).stop(true, true).animate({ 
      width: "300px" 
     }, 250, "swing") 
    }, function() { 
     $(this).stop(false, false).animate({ 
      width: "150px" 
     }, 250, "swing") 
    }); 

    $("#middleRoll").hover(function() { 
     $("#eggroll2, #eggrollL2").stop(true, true).animate({ 
      width: "250px" 
     }, 250, "swing") 
    }, function() { 
     $("#eggroll2, #eggrollL2").stop(false, false).animate({ 
      width: "150px" 
     }, 250, "swing") 
    }); 
});​ 

Answer 1

Hmm ... essayer?

$(function() { 
    $("#eggroll2, #eggrollL2").click(function() { 
     $(this).stop(true, true).animate({ 
      width: "300px" 
     }, 250, "swing") 
    }); 

    $("#middleRoll").click(function() { 
     $("#eggroll2, #eggrollL2").stop(true, true).animate({ 
      width: "250px" 
     }, 250, "swing") 
    }); 
});​ 

Answer 2

Vous pouvez ajouter une classe pour indiquer qu'il clique dessus, et ne rétrécit pas en arrière:

$(function() { 
    $("#eggroll2, #eggrollL2").hover(function() { 
     $(this).stop(true, true).animate({ 
      width: "300px" 
     }, 250, "swing") 
    }, function() { 
     if (!$(this).hasClass('clicked')) { 
      $(this).stop(false, false).animate({ 
       width: "150px" 
      }, 250, "swing") 
     } 
    }).click(function() { 
     $(this).addClass('clicked'); 
    }); 
});​ 

Si vous souhaitez un clic pour changer l'état de rétrécissement/ne reculant pas devant, puis utilisez toggleClass à la place de addClass dans le gestionnaire de clics.

EDIT: (réponse au commentaire de l'OP)

Ajouter une classe aux éléments que vous voulez réduire/agrandir. Si l'on suppose qu'ils sont <img/>, faites ceci:

<img class="images" ... > 

Modifier le code ci-dessus pour quelque chose comme ceci:

$(function() { 
    $(".images").hover(function() { 
     $(this).stop(true, true).animate({ 
      width: "300px" 
     }, 250, "swing") 
    }, function() { 
     if (!$(this).hasClass('clicked')) { 
      $(this).stop(false, false).animate({ 
       width: "150px" 
      }, 250, "swing") 
     } 
    }).click(function() { 
     // remove "clicked" class from all images 
     $(".images").removeClass("clicked"); 

     // add the class to this one only 
     $(this).addClass('clicked'); 

     // mouseout is the 2nd parameter to 'hover' handler 
     $(".images").trigger("mouseout"); 
    }); 
});​