jQuery「放大懸停」相對於圖片中心的放大效果不佳

我得到了一些很好的幫助，以獲得這個基本的部分，但現在我需要再次幫助:( 下面的javascript應該是這樣的當您將鼠標懸停在畫廊中的縮略圖上時，縮略圖會放大，我會增加高度和寬度，但我也會更改頂部和左側偏移以進行補償，以使其看起來像圖片相對於縮略圖的中心放大，而不是伸出朝右下方。jQuery「放大懸停」相對於圖片中心的放大效果不佳

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/

我錯過了什麼？

來源

2012-08-22 user1323153

您需要將position: relative設置爲您的img元素，以使left和top定位正常工作。

來源

2012-08-22 20:08:43

謝謝！這對解決居中問題非常有效。但是這張懸浮的圖片仍然隱藏在其右邊的鄰居之下，並將其底層鄰居推開。你知道如何解決這個問題嗎？ – user1323153

您需要增加被鼠標移出的項目的'z-index'，您需要將其重置爲默認的'z-index'。如果這不起作用，那麼你可能必須將你的項目設置爲'position：absolute'並且手動將它們放置在相對於它們的父項。 –

jQuery「放大懸停」相對於圖片中心的放大效果不佳

回答

相關問題