从中心放大图像百分比？

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

尝试使用 stop(false, true) 而不是仅仅使用 stop()。这意味着动画将在新动画开始之前“完成”。

此外，您可以使用 data() 功能。

Answer 2

在悬停（）之前，您可以将原始和缩放的尺寸和位置存储在图像本身的数据属性中：

$(".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
)

然后在悬停处理程序中，您可以只读取您想要的尺寸/位置，而不是尝试动态计算已经存储，并在鼠标悬停时转换为缩放的图像，或在鼠标移出时转换为原始图像。这也会快很多。