Question

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

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

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

然而，当我这样做时，图像会变大，但是在缩小到适当大小之前，图像会变得更大。这根本不是一个平稳的增长。

您可以看到my full example，只需确保点击“增长”按钮即可增加尺寸并查看故障。

Answer 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);
  });

Answer 2

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

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

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

示例小提琴：

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

2 个答案:

JS Fiddle Demo