0

私の目的は、マウスオーバー時に画像を新しい寸法にアニメーション化し、新しい css クラスを一時的に追加し、マウスアウト時に元の寸法に戻す (そして追加されたクラスを削除する) ことです。

私のコードはマウスオーバーで正常に動作します。マウスアウトすると、追加されたクラスは削除されますが、画像のサイズは元の幅と高さに復元されません。

HTML:

<img src='img.jpg' alt='' class='pulse'>

jQuery:

$(function() {
  // set global img width and height
  var width_pulse_img = 0;
  var height_pulse_img = 0;
  $('img.pulse').hover(function () {
    // onMouseOver: read original width and height on FIRST mouseover
    if (!width_pulse_img) width_pulse_img = $(this).css('width');
    if (!height_pulse_img) height_pulse_img = $(this).css('height');
    // set img expansion ratio and compute new dimensions
    var float_exp = 1 + 0.1;
    var ww = (float_exp*parseInt(width_pulse_img, 10)).toString();
    var hh = (float_exp*parseInt(height_pulse_img, 10)).toString();
    // animate to new dimensions
    $(this).addClass('hover').stop().animate({
      width: ww + 'px',
      height: hh + 'px'
    }, 200);
  }, function () {
    // onMouseOut: animate back to original dimensions: 
    $(this).removeClass('hover').stop().animate({
      // THIS IS THE PART THAT DOES NOT WORK
      width: width_pulse_img + 'px',
      height: height_pulse_img + 'px'
    }, 400);
  });
});

Firefox 12.0、Chrome、IE 9.0 でテストしましたが、動作は同じです。

これは、問題を示すjsFiddleです。どんな助けでも大歓迎です。

4

1 に答える 1

1

代わりに.width()andを使用すると、トリックが実行されます。だからそれを次のように使う.height().css(..)

width_pulse_img = $(this).width();
height_pulse_img = $(this).height();

そしてそれはうまくいくでしょう。

デモ： http： //jsfiddle.net/joycse06/z6zvg/1/

そして、なぜ失敗するのかについては、なぜそれが起こっているのかまだわかりません。ただし、使用中.css()は常にの変更を保持しwidth and heightます。

更新：背後にある理由

ドキュメントが.width（）で言うように

.css（width）と.width（）の違いは、後者は単位のないピクセル値（たとえば、400）を返すのに対し、前者は単位がそのままの値（たとえば、400px）を返すことです。

したがって、これら2つの行を最初に割り当てた後

width_pulse_img = $(this).css('width');   // 220px
height_pulse_img = $(this).css('height'); // 237px

だから彼らはpxあなたが使ったようにすでに持っています.css(。

そして後であなたが使用しているときに 

  width: width_pulse_img + 'px',   // becoming 220pxpx
  height: height_pulse_img + 'px'  // 237pxpx

つまり、全体を無視し、イメージを縮小することはありません。しかし、あなたが使用したように、parseInt expandingうまく機能しています。

.css（）を使用した作業バージョン：http： //jsfiddle.net/joycse06/z6zvg/4/

于 2012-06-23T10:25:26.173 に答える