Увеличение изображений из центра на проценты?

Question

Для веб-сайта, использующего jQuery, на странице есть графика, при нажатии на которую информация выводится в другом разделе сайта. При наведении мыши изображения увеличиваются на процент от их центра. Проблема заключается в том, что при быстром наведении мыши (до завершения анимации) изображения не изменяются в размерах. (Они становятся меньше.)

    $(".locationimg").hover(
        function(){
            var height = $(this).height()
            var width = $(this).width()
            var top = $(this).position().top
            var left = $(this).position().left
            $(this).stop().animate({
                height: height*1.1 + 'px',
                width: width*1.1 + 'px',
                top: top - (((height*1.1)-height)/2) + 'px',
                left: left - (((width*1.1)-width)/2) + 'px'
            });
        },
        function(){
            var height = $(this).height()
            var width = $(this).width()
            var top = $(this).position().top
            var left = $(this).position().left
            var height1 = height/1.1
            var width1 = width/1.1
            $(this).stop().animate({
                height: height1 + 'px',
                width: width1 + 'px',
                top: top - (((height1)-height)/2) + 'px',
                left: left - (((width1)-width)/2) + 'px'
            });
        }
    );

Если бы переменные могли быть определены до входа в .hover (), это было бы легко, потому что изменение размера изображения было бы просто «высота: высота» и так далее. Проблема в том, что для этого требуется несколько изображений, поэтому переменные должны быть определены в .hover ().

Answer 1

Перед наведением курсора () вы можете сохранить исходные и увеличенные размеры и позиции каждого в атрибутах данных на самих изображениях:

$(".locationimg").each(function() {
    var $this      = $(this),
        origWidth  = $this.width(), 
        origHeight = $this.height(), 
        zoomWidth  = origWidth * 1.1,
        zoomHeight = origHeight * 1.1,
        pos        = $this.position(),
        origTop    = pos.top,
        origLeft   = pos.left
        // ... also find zoomed top, left...
    ;
    $this.data({
        "origwidth":  origWidth,
        "origHeight": origHeight,
        "zoomWidth":  zoomWidth,
        "zoomHeight": zoomHeight
        /* etc. */
        /* ... also store top and left... */
    });
}).hover(
    // your hover code here
)

Затем внутри обработчика наведения, вместо того, чтобы пытаться вычислитьна лету, вы можете просто прочитать размеры / позиции, которые вы уже сохранили, и перейти к увеличенным при наведении мыши или к оригиналу при наведении мыши.Это также будет намного быстрее.

Answer 2

Попробуйте использовать stop(false, true) вместо stop(). Это означает, что анимация будет «завершена» до запуска новой анимации.

Кроме того, вы можете сохранить высоту и ширину элемента, используя функцию data().