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）。

所以在这两条线的第一次分配之后

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 回答