jquery animer différentes largeurs img

Question

J'ai cherché une réponse pendant une longue période sans succès, il est donc temps de demander. J'essaie d'utiliser .animate() pour changer la taille d'une image une fois cliquée. Le premier état de l'image serait une taille de vignette, qui serait animée à la taille d'origine de l'image, puis à une vignette à nouveau.

edit: les images se chargent avec une largeur de 150 pixels par défaut. Le problème est que toutes les images n'ont pas la même taille "originale". J'ai donc besoin d'un moyen de dire à une fonction générique de passer à la taille d'origine de l'image actuelle.

Ceci est mon code actuel qui charge sur $ (fenêtre) .load:

$('img[class=resize]').click(function(){ 
     if ($(this).width() != 150) 
     { 
      $(this).animate({width: '150px'}, 400); 
     } 
     else 
     { 
      $(this).animate({width: ''}, 400); 
     } 
    }); 

Maintenant, cela ne fonctionne évidemment pas la façon dont je le veux, parce que .animate() pense quand je dis width: '' je veux faire la largeur = 0. Des suggestions comment je devrais aller à ce sujet?

Answer 1

est ici une idée: Lorsque vous écrivez une image à la page, ajouter une classe ou d'un autre attribut qui est la largeur d'origine de l'image, puis quand vous animez revenir à sa taille d'origine, essayez $(this).animate({width: $(this).attr('original_size_attribute_of_your_choosing')}, 400);

tl, dr: enregistre la taille d'origine dans un attribut de chaque image.