jquery动画不同的img宽度

Posted 2023-05-08

【中文标题】jquery动画不同的img宽度

【英文标题】：jquery animating different img widths

【发布时间】：2011-03-03 21:58:32

【问题描述】：

我一直在寻找答案很长时间无济于事，所以是时候问了。 我正在尝试使用.animate() 在单击后更改图像的大小。图像的第一个状态是缩略图大小，它将动画到图像的原始大小，然后再次变为缩略图。

编辑：图片默认加载宽度为 150px。

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

这是我当前在 $(window).load 上加载的代码：

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

现在这显然不能按我想要的方式工作，因为.animate() 认为当我说width: '' 我想让宽度 = 0。有什么建议我应该怎么做？

【问题讨论】：

欢迎来到SO，请不要忘记访问和阅读***.com/faq

<img> 标签在加载时是否在页面中设置了高度/宽度，无论是直接作为属性还是通过 CSS？

是的，图片加载宽度为 150px。

【参考方案1】：

这里有一个想法：当您将图像写入页面时，添加一个类或其他一些属性作为图像的原始宽度，然后当您将其动画恢复到原始大小时，尝试$(this).animate(width: $(this).attr('original_size_attribute_of_your_choosing'), 400);

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