javascript - Div：悬停时放大并调整回原来的大小

Question

我正在尝试在悬停时将 div 扩展到特定大小，并且我希望 div 在悬停时返回到其原始大小，使用 animate 函数。

有什么方法可以计算要在动画中使用的 div 的原始大小？

Answer 1

您必须将原始状态存储在事件处理程序之外/之前：

var origHeight = $("div").outerHeight(true);

$("div").hover(function(e){
    $(this).stop().animate({
        height: e.type === "mouseenter" ? $(window).height() : origHeight
    });
});

http://jsfiddle.net/b5HUU/2/

顺便说一句，在悬停时这样做不是一个好主意......因为鼠标没有空间离开（整个浏览器除外）。

更新

所以最好使用点击事件：

var origHeight = $("div").outerHeight(true),
    clickState = false;

$("div").click(function(e){
    clickState = !clickState;
    $(this).stop().animate({
        height: clickState ? $(window).height() : origHeight
    });
});

http://jsfiddle.net/b5HUU/4/

Answer 2

你需要stop动画mouseenter和mouseleave

var w = $('#an').width(),
    n = w + 100 ; // particular size

function widthAnimate( width ){
    return function(){
        $('#an').stop().animate({
            width : width +'px',
        });
    }
};

$('#an').mouseenter( widthAnimate( n ) )
       .mouseleave( widthAnimate(w ));

在jsfiddle中添加了这个