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（）之前定义变量，这很容易，因为调整图像大小只是'height：height'等等。这个问题是有几个图像都需要这样做，因此需要在.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
)

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

以百分比从中心放大图像？

2 个答案: