javascript - ぼかしdivのホバー/コントラクトで展開することを検討しています

Question

こんにちは、私は数時間検索エンジンの壁に頭をぶつけていました。

ぼかしで 1 つのサイズ、たとえば 300x30 の div を作成する必要があります。これは、ホバーすると 300x300 に拡張され、その下のすべてのコンテンツが押し下げられ、ぼやけると 300x30 サイズに戻ります (「もはやホバーされていない」または子供が呼んでいるものは何でも)それは今では笑）再び。誰かが私にいくつかのリソースを教えてくれますか、それとも遊ぶためのコードビットを教えてくれますか? それは大歓迎です！

Answer 1

アニメーションが必要ない場合は、CSS で疑似クラスを使用できます。

div.div {
   height: 30px;
   width: 300px;
   border: 1px solid black;
}

div.div:hover {
   height: 300px;
}​

実際の例

http://jsfiddle.net/aFUmS/

$('.div').hover(function() {
    $(this).animate({
        height: '300px'
    }, 300);
},function() {
    $(this).animate({
        height: '30px'
    }, 300);
});​

アニメーションが必要な場合のjQueryの例

http://jsfiddle.net/CvhkM/

Answer 2

.stop()または、の前にaを追加する.animateと、ポインタを削除した直後にアニメーションが停止します。

$('.div').hover(function() {
    $(this).stop().animate({
        height: '300px'
    }, 300);
},function() {
    $(this).stop().animate({
        height: '30px'
    }, 300);
});

Answer 3

ロバートの答えにトランジションを追加すると、それは CSS のみであり、アニメーションも得られます。

これを div に追加します (div:hover ではありません): transition: height 0.5s ease-in;

これをサイトに実装したところ、モバイルでもうまく機能します。ただし、div は、折りたたまれて展開されたときに静的な高さである必要があります。