既淡入又设定高度？

Question

是否可以同时淡入和设置元素的高度？

    if (scrollPosition > 50) {
    $("header").fadeIn("slow");
    $("header").css("height", "50px");
}

Answer 1

这是一个仅限CSS的解决方案（使用JS仅切换类）：

function toggle() {
  $('#d').toggleClass('show');
}

#d {display: inline-block; height: 0; opacity: 0; width: 100px; background: green; transition: all 1s linear;vertical-align: top}
#d.show {height: 100px; opacity: 1}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="d"></div>
<br>
<button onclick="toggle()">Toggle</button>