javascript - jQuery使用hover()连续缩放div元素

我最近尝试将jQuery的effect('scale')函数与jQuery中的hover()函数一起使用。这个想法是在mouseenter上放大div元素，并在mouseleave上将其缩小到正常。代码如下:

$('.boxgrid').hover(function(){
    $(this).effect('scale', {percent:125}, 1000);
}, function() {
    $(this).effect('scale', {percent:80}, 1000);
});

我尝试在jsfiddle中对此进行测试，但是当鼠标进入元素时，它不会放大和缩小，而是会不断放大。您可以看到jsfiddle here。我的问题是如何解决？我的理解是mouseenter事件仅被触发一次，并在mouseleaves事件被触发时重置，但这似乎是另外一个说法？我想念什么吗？任何帮助是极大的赞赏。

最佳答案

每当动画结束时，它将调用悬停函数。我对其进行了如下修改，并且似乎可以正常工作:

window.boxScaled = false;
$('.boxgrid').hover(function(){
    if(!window.boxScaled) {
        window.boxScaled = true;
        $(this).effect('scale', {percent:125}, 1000);
    }
}, function() {
    if(window.boxScaled) {
        window.boxScaled = false;
    $(this).effect('scale', {percent:80}, 1000)
        }
});