jquery - jQuery:divを高さに拡張してテキストを追加するにはどうすればよいですか?

Question

ナビゲーションの下にコンテナー div があるホームページを持っています。これを設定した高さに拡張し、コンテナー div 内に特定のテキストを追加しようとしています。

その上、ホームページからのみナビゲートしているときにのみ、これを実行したいと考えています。

これを行うのに役立つjQueryマジックはありますか?

ありがとう！

以前のホームページはこちら

これは、ホームをクリックしてロードした別のページのアフターです。

Answer 1

次のようなことを試しましたか：

window.onbeforeunload = function() {
    $('.container').css('height', '50px').text('Bye bye!');
}

また、コンテナの高さを手動で指定しないように、コンテナ内に別の要素をネストしてみることもできます。次に、JavaScript/CSS を次のように最小化できます。

$('.container .child').show();

.child {
   height: 20px;
}

Answer 2

これはどう？

$('#container-div').animate({
    height: '100px' // your target fixed height.
}, 'fast').html('specific text');

コンテナの div には ID がありますcontainer-div。トランジションが必要ない場合は、 を使用できます.css()。

$('#container-div').css('height', '100px').html('specific text');

Answer 3

これは CSS3 で実現できます: CSS3 アニメーションを作成します。

/* Create predefined animation using keyframes */
@keyframes appear { 0% { height: 0px; } 100% { height: 100%; } }
@-o-keyframes appear { 0% { height: 0px; } 100% { height: 100%; } }
@-moz-keyframes appear { 0% { height: 0px; } 100% { height: 100%; } }
@-webkit-keyframes appear { 0% { height: 0px; } 100% { height: 100%; } }

/* will effect in children with less then 150px to slide to this height */
div { min-height: 150px; } 
/* Div is larger then 150px? It will just animate to its required height */
div:hover > div { 
  -webkit-animation: drop 1s 1 linear;
  -moz-animation: drop 1s 1 linear;
  -o-animation: drop 1s 1 linear;
  animation: drop 1s 1 linear;
  overflow-y: hidden;
}

作業例