Question

我有一个需要设置在特定像素高度的div，例如100px，然后当点击“显示更多”div时，将该div增加到其自然高度的100％。诀窍是让它成功实现。

如果我从一个固定高度（例如100px）移动到另一个固定高度（例如200px），我可以顺利地为它制作动画，但这对我不起作用。

有没有办法打开特定高度的div并让它动画（滑下）平滑到一个百分比？

这是jFiddle：http://jsfiddle.net/EvikJames/3pCSg/2/

<div class="Model">
    Some info. Some info. Some info.
    Some info. Some info. Some info.
    Some info. Some info. Some info.
</div>
<div class="ShowMore ">show more</div>

.Model {
    width: 100px;
    background-color: yellow;
    overflow: hidden;
  }
   .ShowMore {
    text-decoration: underline;
}

$(".Model").each(function() {
    $(this).css("height", "50px");
});

$(".ShowMore").click(function() {
    // this works smoothly
    // $(this).prev().css("height", "100px");
});
$(".ShowMore").click(function() {
    $(this).prev().animate({height: "100%"}, 3000);
});

Answer 1

您可以在设置元素之前获取元素的高度，并将其设置为动画：

var m = $(".Model").height();

...

$(".ShowMore").click(function() {
    $(this).prev().animate({
        height: m + "px"
    }, 3000);
});

http://jsfiddle.net/MzWGz/

Answer 2

为什么你不把这个节目放在它自己的div中更多的内容并隐藏并显示相反，那么你可以让顶级div高度自动：

<div style="height:auto">
  <p>Always show</p>
  <div class="OtherContent">
     ...Other Content
  </div>
  <div class="ShowMore>Show More</div>
</div>


$(".ShowMore").click(function() {
// this works smoothly
  $(this).prev().slideDown();
});

在此处http://jsfiddle.net/Wvb6w/

jQuery - 如何将div设置为特定的像素高度，然后动画到百分比 - 顺利？

2 个答案: