Question

我需要这个div在悬停时放大，当鼠标远离div时收缩回默认值。

我这样做了：

$('.box').live('hover', function()
{
    if($(this).height() == 145 && $(this).width() == 100)
    {
        $(this).animate({ height: '+=30px', width: '+=30px' }, 500)
        $('.image img').animate({ height: '+=30px', width: '+=30px' }, 500);
    }
    else
    {
        $(this).animate({ height: '-=30px', width: '-=30px' }, 500)
        $(this).next().find('.image img').animate({ height: '-=30px', width: '-=30px' }, 500);
    }
});

虽然，如果我继续徘徊并快速移开鼠标，它会不断缩小。

演示：http://jsfiddle.net/avXJV/1/

我需要它在悬停和鼠标移动时保持完整，以便没有任何元素缩小到一个小点或变得非常大......

Answer 1

也许this正是您所寻找的。关键是在运行动画的下一步之前使用.stop（），这样就不会反复触发。

Answer 2

您需要做的就是使用固定的像素大小，而不是+ =， - = ..悬停事件被多次触发，这些值是累加的。

每次将鼠标悬停在它上面时，大小永远不会是原始的，并且else子句会运行。

使用jQuery扩展和缩小div

2 个答案: