Question

我遇到了在网页上扩展元素的各种方法，例如使用javascript和jquery的div。我想知道在考虑性能等时最好和最简单的方法是什么。

在我的例子中，我有一个我正在建立的新网站，并在首页上有一个新闻栏目。新闻项目应该在特定的高度，例如250px，宽度是容器的宽度（使用960网格css）。

我有这个布局。

<div class="grid_10 news">
   <article></article>
   <article></article>
   <article></article>
   <article></article>
</div>

该文章包含ofc信息，元数据等，但右侧还有一个“阅读更多”链接，应将文章扩展到其最高位置。

现在，我对文章没有特定的高度或css（display：block除外）。那么你们会用什么技术来做，你会怎么做？

干杯。

Answer 1

如果您不知道即将到来的新高度，您可以将高度设置为自动。因此，如果文章是您阅读更多按钮/链接的父级，您可以执行以下操作：

$(".your_read_more_button").parent().css('height', 'auto');

这不是直接可动画的，所以如果你正在寻找平滑过渡，你要么必须克隆它并获得实际显示的高度，然后为原始动画设置动画，或者使用slideUp（）和slideDown（）并更改高度介于两者之间。

如果您知道扩展之前和之后的高度，那么您可以执行以下css3过渡：

.news article
{
   -moz-transition: height 1s ease-in-out;
   -webkit-transition: height 1s ease-in-out;
   -o-transition: height 1s ease-in-out;
   transition: height 1s ease-in-out;
}

.expanded
{
   height: 250px;
}

或者您只是使用jQuery animate：

$('article').stop(true,true).animate({height: 250px}, 400);

与.toggle（）不同，这只会从1个高度变为另一个高度，这使得该元素在短时间内不可见，我个人觉得它更容易在动画中扰乱页面整体印象

用javascript扩展元素，最好的方法？

1 个答案: