javascript - jQuery“悬停放大”无法相对于图片中心放大

Question

我在了解基本部分方面得到了一些很大的帮助，但现在我再次需要帮助:(下面的 javascript 应该可以做到这一点，以便当您将鼠标悬停在画廊中的缩略图上时，缩略图会放大。我增加了高度和宽度，但我还更改了顶部和左侧的偏移量以进行补偿，以使图片看起来相对于缩略图的中心正在放大，而不是向右下角延伸。

    jQuery('.videogall-thumb').hover(function() {
    var currThumb = jQuery(this).attr('id');
    jQuery('.videogall-thumb[id="' + currThumb +'"]').stop().animate({height: "100", width: "118", left: "-12", top: "-15"}, "fast");
}, function() {
    jQuery('.videogall-thumb').stop().animate({height: "83", width: "98", left: "0", top: "0"}, "fast");
}
);

至少那是我希望发生的事情。但是缩略图仍然在伸展，而不是从中心放大。此外，正在放大的缩略图最终会在该行的相邻缩略图下方而不是在它们的顶部，并且它会推动下一行中的相邻缩略图。看看我的意思：http: //oneworldyouthproject.org/tubepress-test/

我错过了什么？

Answer 1

您需要设置position: relative您的img元素才能使leftandtop定位起作用。