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

Question

我最近尝试将 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 事件被触发时重置，但这似乎另有说明？我错过了什么吗？非常感谢任何帮助。

Answer 1

每次动画结束时它都会调用悬停函数。我对其进行了如下修改，它似乎可以工作:

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