在應用CSS類後獲取更新的div偏移量

Question

我試圖實現一個效果，其中圖像（它可以是不同的大小）放大懸停與邊框出現在它周圍。非縮放圖像的最大尺寸限制爲250像素，縮放至550像素。

我這樣做是通過在mouseenter上應用一個類到div上並在mouseleave上刪除它。這工作得很好，但問題是我想檢測div是否部分在屏幕外。要做到這一點，我需要改變div的偏移：

$(document).ready(function() { 

    $('.image-container').on('mouseenter', function() { 

     var y = $(this).offset().top, 
      x = $(this).offset().left; 

     console.log('old', x, y); 

     $(this).addClass('image-hover'); 

     y = $(this).offset().top; 
     x = $(this).offset().left; 

     console.log('new', x, y); 
    }); 

    $('.image-container').on('mouseleave', function() { 

     $(this).removeClass('image-hover'); 
    }); 
}); 

如果你看一下下面的jsfiddle，我加入下課後得到老偏移。

http://jsfiddle.net/6JZCW/14/

那麼，如何獲得更新的偏移？有沒有更好的方式去做我想達到的目標？

Answer 1

你試圖獲得你的$（'。image-container'）的偏移量，但它的填充從不改變，你只改變'.image-block'的填充值，所以當你console.log做到這一點時

$('.image-block').offset().top; 
$('.image-block').offset().top;