javascript - Div: ホバーアウト時に元のサイズに拡大およびサイズ変更します

Question

ホバー イン時に div を特定のサイズに拡張しようとしています。アニメーション機能を使用して、ホバー アウト時に div を元のサイズに戻します。

アニメーションで使用する 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に追加しました