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

Posted 2023-05-08

【中文标题】jQuery：如何让 div 扩展到一个高度并添加文本？

【英文标题】：jQuery: How would I get a div to expand to a height and add text?

【发布时间】：2013-01-05 02:50:16

【问题描述】：

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

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

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

谢谢！

这是首页的前面

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

【问题讨论】：

你试过什么？你有一些示例代码吗？很难准确地说出你在这里的目的。

我更新了这个问题，并附上了几张我想要完成的截图。

我认为这里的答案非常接近。如何从可能不在某个页面上时加载的 jquery 函数开始？这可能吗？

【参考方案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