Получение обновленного смещения div после применения к нему класса CSS

Question

Я пытаюсь реализовать эффект, при котором изображение (оно может быть разного размера) масштабируется при наведении с рамкой вокруг него. Не увеличенное изображение ограничено максимальным размером 250 пикселей и увеличенным до 550 пикселей.

Я делаю это, применяя класс к div на mouseenter и удаляя его на мышеловке. Это работает достаточно хорошо, но проблема в том, что я хочу определить, идет ли 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-блока» поэтому, когда вы console.log сделать это

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