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

中添加了此内容

Div：在悬停时放大并重新调整原始大小

2 个答案: