中心缩放图像的更好方法？

Question

我组合了一个 jquery 函数，用于在鼠标悬停时放大和缩小图像，同时保持约束框大小不变。

在这里演示： http://jsfiddle.net/q9jHu/

它效果很好，但是如果你摇动光标图像之间很快就会变得混乱。处于中间缩放状态时，脚本存储的尺寸不正确。我尝试将 .stop() 添加到方程中，但似乎无法修复该故障。

我猜我应该用 .each() 存储数据，而不是在鼠标悬停时存储数据，但我不知道该怎么做。

有什么想法吗？

Answer 1

看这里
http://jsfiddle.net/q9jHu/4/

$('.pixbox img').on({
    mouseover: function(){
        var $scale = 1.5;
        if (!$(this).data('w'))
        {
            $(this).data('w', $(this).width())
                   .data('h', $(this).height());
        }
        $(this).stop(true).animate({
            width:  $(this).data('w')*$scale,
            height: $(this).data('h')*$scale,
            left: -$(this).data('w')*($scale - 1)/2,
            top:  -$(this).data('h')*($scale - 1)/2
        }, 'fast');
    },
    mouseout: function(){
        $(this).stop(true).animate({
            width:  $(this).data('w'),
            height: $(this).data('h'),
            left: 0,
            top: 0
        }, 'fast');
    }
});

Answer 2

最简单的就是改为

var $w = $(this).width();
var $h = $(this).height();

//

var $w = 120;
var $h = 180;

static value

但cheery的解决方案是最优的