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

Answer 2

我认为如果你在盒子完成缩放之前离开盒子（或者在盒子缩小之前重新进入盒子），你需要强制动画停止：

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

http://jsfiddle.net/magicaj/9GLEy/10/

您对悬停 (mouseenter/mouseleave) 的理解是正确的，它们应该只在进入/离开时触发一次。