jQuery使用hover（）连续缩放div元素

Question

I recently tried to use jQuery's effect('scale') function with the hover() function in jQuery. The idea is to enlarge the div element on mouseenter, and shrink it back to normal on mouseleave. The code is as follows:

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

I tried testing this in a jsfiddle, but instead of upscaling and downscaling once when a mouse enters the element, it keeps enlarging it. You can see the jsfiddle here . My question is how do I fix it? My understanding was that the mouseenter event was fired only once, and reset when the mouseleaves event is fired, but this seems to say otherwise? Am I missing something? Any help is greatly appreciated.

Answer 1

It calls the hover function every time the animation finishes. I modified it as follows and it appears to work:

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

I think you need to force the animation to stop if you leave the box before it has finished scaling (or reenter the box before it has shrunk):

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

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

Your understanding of hover (mouseenter/mouseleave) is correct, they should only fire once upon entering/leaving.