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

Question

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

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

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

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

您可以查看我的完整示例，只需确保单击“增长”按钮以增加大小并查看故障。

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

小提琴示例：

JS 小提琴演示