2010-06-15 71 views
1

我一直在寻找一个很长时间的答案没有用,所以现在是时候提问。 我试图使用.animate()来更改一次点击图像的大小。图像的第一个状态应该是缩略图大小,它会根据图像的原始大小生成动画,然后再转换为缩略图。jquery动画不同的img宽度

编辑:默认情况下图像加载宽度为150px。

问题是,并非所有图像都具有相同的“原始”大小,所以我需要一种方法来告诉一个通用函数切换到当前图像的原始大小。

这是加载在$(窗口).load我当前的代码:

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

现在,这显然是行不通的,我希望它的方式,因为.animate()认为,当我说width: ''我要打宽度= 0.任何建议我应该怎么做呢?

+0

欢迎来到SO,请不要忘记访问并阅读http://stackoverflow.com/faq – Reigel 2010-06-15 09:58:43

+0

''标记在加载时在页面上设置了高度/宽度,可以直接将它们设置为属性或通过CSS? – 2010-06-15 10:09:21

+0

是的,图像的宽度为150px。 – romeozor 2010-06-15 10:42:49

回答

0

这里有一个想法:当你写一个形象的页面,添加一个类或者一些其他的属性,它是图像的原始宽度,那么当你描绘它恢复到原来的大小,尽量$(this).animate({width: $(this).attr('original_size_attribute_of_your_choosing')}, 400);

TL, dr:将原始大小保存在每个图像的属性中。