jquery - jQuery：我如何让 div 扩展到一个高度并添加文本？

Question

我有一个主页，在导航下方有一个容器 div，我试图将其扩展到设定的高度并在容器 div 内添加特定文本。

最重要的是，我只希望它在我仅从主页导航时执行此操作。

任何可以帮助我做到这一点的 jQuery 魔法？

谢谢！

这是主页上的之前

这是在主页上单击并加载的不同页面的之后。

Answer 1

这个怎么样？

$('#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 2

这可以通过 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;
}

示例工作

Answer 3

您是否尝试过类似的方法：

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

您可能还想尝试在容器内嵌套另一个元素，以防止您手动指定容器高度。然后，您可以将 JavaScript/CSS 最小化为：

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

.child {
   height: 20px;
}