javascript - jQuery 从中心展开元素不起作用

Question

我正在尝试在画廊练习中对悬停事件产生类似缩放的效果。我需要的是图像似乎从其中心扩展，而不是向下和向右扩展。如果我理解正确，我需要将它向左和向上移动一半才能工作。此外，我正在使用 em，因此我尝试在此处将 em 转换为像素。

相关html:

<div id="gallery">
  <img src="img/cool1.gif">
  <img src="img/cool2.gif" id="gal2">
  <img src="img/cool3.gif" id="gal3">
</div>

CSS:

#gallery {
  width: 31em;
  margin-left: auto;
  margin-right: auto;
}

#gallery img {
  width: 10em;
  height: auto;
  position: absolute;
}

#gal2 {
  margin-left: 10em;
}

#gal3 {
  margin-left: 20em;
}

最后，jQuery:

var fontSize = $("#gallery img").css("font-size");//equal to 1em?
var fontInt = parseInt(fontSize);
        
var t = $("#gallery img").position().top;
var tNew = t - (5 * fontInt);//top position
        
var l = $("#gallery img").position().left;
var lNew = l - (5 * fontInt);//left position


$("#gallery img").hover(
    function() {
        
        $(this).stop().css("zIndex", "1").animate({
            height : "20em",
            width : "20em",
            top : tNew,
            left : lNew
            
        }, 400);
    }, //end mouseover
    function() {
        $(this).stop().animate({
            height : "10em",
            width : "10em",
            top : t,
            left : l,
            zIndex : "0"
        }, 400);
    } //end mouseout
);//end hover

edit 1 图像展开并更改位置，但未按预期进行。此外，他们不会在鼠标移出时返回。感谢 Racil Hilan 解决了 em-px 转换问题!

edit 2 问题大部分通过固定变量范围解决——位置值在 hover() 函数之前移动。唯一剩下的错误是图片在第一次交互时返回到它们的位置之前逃逸到正文的右上角。之后，它按预期运行。另外，有人可以解释为什么当 fontInt 变量乘以 5 而不是 10 时这有效吗？

编辑 3 – 解决方案 正如 Mauricio Santamaria 在下面所说，只需添加 css() 函数设置顶部和左侧参数，然后将鼠标悬停在 #gallery img 元素上，如下所示:

$("#gallery img").css({"top" : t, "left" : l}).hover(...);

其余保持不变。

我也为此临时制作了一个 fiddle :http://jsfiddle.net/dzenesiz/wudw5hmu/15/

Answer 1

问题是 $(this).css("font-size"); 返回带有单位(例如 16px)的大小，这不是数字，计算结果为NaN。

一个快速的解决方案是像这样将它解析为一个整数:

var fontSize = parseInt($(this).css("font-size")); //equal to 1em?