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

我有一些图像会在页面上相互重叠。我希望这些元素中的一个根据某个事件慢慢变大

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

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

然而，当我这样做的时候，图像确实变大了，但是有一段时间图像在缩小到合适的大小之前变得更大了。这根本不是一个平稳的增长

---

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

也许这就是您正在寻找的：

---

首先，我建议使用该插件，以便它在没有良好处理能力的移动设备和计算机上顺利运行

第二，我会增加你的宽度，这样当你点击“增长”按钮时，它的大小会慢慢增加

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

小提琴示例：

---

确切地说是哪个事件？当您使用

var right=$（'#right'）缓存了正确的元素时

那你为什么要在动画中再次使用

$（'#right'）

；Chrome：第一个“成长”工程如预期；第二次增长将图像设置为没有动画的大小，然后使用动画缩小一点…如果旧浏览器不是问题，我会使用CSS缩放和转换，只需单击添加一个类。IMO更简单、更流畅。您的示例可以工作，只需删除

max width:100%来自
.face
一些解释可能会让QA更容易意识到他们在哪里出错。@dualed ya，也许我甚至认为这不是一个好的解决方案，我更喜欢使用Adeneo的注释中的解决方案，使用：CSS3 transform:scale（x）；propertyThank为jQuery Animate Enhanced链接，我不知道这一点。
  $('#grow').click(function() {
    var right = $('#right');
    right.show("fast");
    $('#right').animate({ "width": "+=" + right.width() * .10}, "slow");
    $('#text').html(width);
  });