私は、画像（さまざまなサイズにすることができます）がホバー時にズームし、その周りに境界線が表示される効果を実装しようとしています。ズームされていない画像は最大サイズ 250px に、ズームされた画像は 550px に制限されています。
これを行うには、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 を見ると、クラスを追加した後に古いオフセットが取得されます。
では、更新されたオフセットを取得するにはどうすればよいでしょうか? 私が達成したいことを行うためのより良い方法はありますか?