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

Question

首先要说的是：我已经阅读了大量的网络文章以及我可以在这里找到的所有问题和答案。许多人都有帮助，但不是解决方案。另外，五天前开始学习jquery :)

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

相关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 图片展开并改变了位置，但未达到预期效果。此外，他们不会 return 鼠标移开。感谢 Racil Hilan 解决 em-px 转换问题！

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

edit 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"); returns 带有单位（例如 16px）的大小不是数字，计算结果为 NaN。

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

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

Answer 2

要在第一次互动时删除 "jump"，您应该在 css 上设置 "top" 和 "left"，这会删除该行为（在您的 [=16= 上测试过） ] 8px 或 0.4em 相当于您的初始图像大小），以及关于为什么 5 得到您想要的结果的问题是该操作的结果 (5 * fontInt) 为您提供了图像的初始值，即。 100px (10em)，这是顶部和左侧的量，您需要使其从中心缩放。（fontSize初始值为20em，初始t=8，所以8-100=-92，考虑margin的正确值）

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

jQuery expand element from center not working

html

javascript

css

jquery

em