Question

我的目标是在鼠标悬停时将图像设置为新尺寸，并临时添加新的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。任何帮助将不胜感激。

Answer 1

使用.width()和.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/

悬停时jQuery'扩展'和'合同'图像 - '合同'失败

1 个答案: