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

编辑1 图片展开并更改位置，但不符合预期。此外，他们不会在鼠标移动时返回。感谢Racil Hilan解决em-px转换问题！

编辑2 通过修复变量范围解决问题 - 在hover（）函数之前移动的位置值。唯一剩下的错误是图片逃逸到身体的右上角，然后在第一次互动时返回到他们的位置。之后，它按预期运行。此外，有人可以解释为什么当fontInt变量乘以5而不是10？

时，这是有效的

编辑3 - 解决方案正如毛里西奥·桑塔马里亚在下面所说，只需添加css（）函数设置顶部和左侧参数，然后将其悬停在#gallery img元素上，如下所示：

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

其余的保持不变。

我也为此即兴创作了一个小提琴：http://jsfiddle.net/dzenesiz/wudw5hmu/15/

Answer 1

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

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

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

Answer 2

要删除第一次交互时的“跳转”，你应该在你的css上设置“top”和“left”，这样就消除了这种行为（在你的小提琴上测试了8px或0.4em相当于你的初始图像大小），以及你的问题是为什么5得到你想要的结果，那个操作的结果（5 * fontInt）给你图像的初始值即。 100px（10em），这是你从中心缩放所需的顶部和左边的数量。（fontSize的初始值是20em，初始t = 8，所以8-100 = -92，正确的值考虑到保证金）

jQuery从中心扩展元素不工作

2 个答案: