在悬停时放大并调整大小为原始大小

Div: enlarge and resize back to original on hover out

本文关键字：小为 原始 调整 悬停 放大      更新时间：2023-09-26

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

是否有任何方法可以计算在动画中使用的div的原始大小?

必须将原始状态存储在eventandler之外/之前:

var origHeight = $("div").outerHeight(true);
$("div").hover(function(e){
    $(this).stop().animate({
        height: e.type === "mouseenter" ? $(window).height() : origHeight
    });
});
http://jsfiddle.net/b5HUU/2/

顺便说一下，在悬停时这样做不是个好主意…因为没有空间让鼠标离开(除了整个浏览器)。

所以最好使用click-event: 
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/

你需要在mouseenter和mouseleave上添加stop动画

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

在

中添加
相关文章：