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

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');
    }
});