3

ページ上で互いに重なり合う画像がいくつかあります。何らかのイベントに基づいて、これらの要素の 1 つがゆっくりと大きくなるようにしたいと考えています。

これを行うには、次のように jquery .animate メソッドを使用しています。

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

ただし、そうすると画像は大きくなりますが、適切なサイズに縮小する前に画像がさらに大きくなる瞬間があります。決して順調な伸びではありません。

私の完全な例を見ることができます.Growボタンをクリックしてサイズを大きくし、グリッチを確認してください.

4

2 に答える 2

2

多分それはあなたが探しているものです：

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);
  });
于 2013-06-13T12:06:22.197 に答える
2

まず、jQuery Animate Enhancedプラグインを使用することをお勧めします。これにより、処理能力の低いモバイル デバイスやコンピューターでもスムーズに動作します。

次に、拡大ボタンをクリックすると、幅がゆっくりと大きくなるように、幅を増やします。

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

フィドルの例:

JS フィドルのデモ

于 2013-06-13T12:21:43.777 に答える