jQuery：如何让 div 扩展到一个高度并添加文本？答案

【问题标题】：jQuery: How would I get a div to expand to a height and add text?jQuery：如何让 div 扩展到一个高度并添加文本？
【发布时间】：2013-01-05 02:50:16
【问题描述】：

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

除此之外，我只希望它仅在我从主页导航时执行此操作。

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

谢谢！

这是首页的前面

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

【问题讨论】：

你试过什么？你有一些示例代码吗？很难准确地说出你在这里的目的。
我更新了这个问题，并附上了几张我想要完成的截图。
我认为这里的答案非常接近。如何从可能不在某个页面上时加载的 jquery 函数开始？这可能吗？

标签： jquery html css jquery-ui jquery-selectors

【解决方案1】：

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

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

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

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

.child {
   height: 20px;
}

【讨论】：

【解决方案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');

【讨论】：

【解决方案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;
}

Example working

【讨论】：