使用jquery平滑增加图像的大小

Posted 2023-05-08

【中文标题】使用jquery平滑增加图像的大小

【英文标题】：Smoothly increase the size of an image with jquery

【发布时间】：2013-06-09 19:19:18

【问题描述】：

我有几张图片会在页面上相互重叠。我希望这些元素之一根据某些事件慢慢变大。

为此，我使用 jquery .animate 方法，如下所示：

$('#right').animate( "width": width + "%", "slow");

但是，当我这样做时，图像确实会变大，但有时图像会变得更大，然后再缩小到适当的大小。这根本不是一个平稳的增长。

您可以看到my full example，只需确保单击“增长”按钮以增加大小并查看故障。

【问题讨论】：

究竟是哪个事件？

当您使用var right = $('#right'); 缓存了right 元素后，为什么还要再次使用$('#right') 来制作动画？

Firefox：“成长”按钮完全没有效果； Chrome：第一个“成长”按预期工作；第二次增长将图像设置为没有动画的大小，然后缩小有点动画......

如果旧浏览器不成问题，我会使用 CSS 缩放和过渡，只需在点击时添加一个类。 IMO 更简单、更流畅。

您的示例作品，只需从 .face 中删除 max-width: 100%;

【参考方案1】：

也许这就是你要找的东西：

http://jsfiddle.net/7bEdh/5/

$('#grow').click(function () 
      var right = $('#right');
      right.show("fast");
      var width =  parseInt(100 * right.width() /right.parent().width() + 10,10);
      $('#right').animate(
          "width": "+="+ width 
      , "slow");
      $('#text').html(width);
  );

【讨论】：

一些解释可能会让 QA 更容易意识到他们在哪里犯了错误。

@dualed ya，也许我认为这不是一个好的解决方案，我更喜欢使用 Adeneo 评论中的解决方案，使用：CSS3 transform: scale(x);属性

【参考方案2】：

首先，我建议使用jQuery Animate Enhanced 插件，以便它在处理能力不强的移动设备和计算机上流畅运行。

其次，我会增加你的宽度，以便在你点击增长按钮时它的大小会慢慢增加。

  $('#grow').click(function() 
    var right = $('#right');
    right.show("fast");
    $('#right').animate( "width": "+=" + right.width() * .10, "slow");
    $('#text').html(width);
  );

小提琴示例：

JS Fiddle Demo

【讨论】：

感谢您提供 jQuery Animate Enhanced 的链接 - 我不知道这个。