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

Question

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

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

我有这个布局。

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

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

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

干杯。

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动画：

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

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