javascript - jQuery 定时通知 onclick

Question

我希望发生 fade 动画 plus，.hideme 的高度也从 0px 增长到 30px 在().delay(2000)期间。

点击时 .hideme 不显示为 display: block;，我希望它的 height 从 0px 变为 30px for ().delay(2000)，同时还保留fade动画。

$(document).ready(function() {
  $("#post-draft1").hide();
  $("#post-button1").click(postNotification);
});

function postNotification() {
  $("#post-draft1").fadeIn("slow").delay(2000).fadeOut("slow");
}

.hideme {
  background: blue;
  height: 30px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="post-button1">Save Click</button>
<div class="hideme" id="post-draft1">This is a test div</div>

Answer 1

$(document).ready(function() {
  $("#post-draft1").hide();
  $("#post-button1").click(postNotification);
});

function postNotification() {
  // $("#post-draft1").fadeIn("slow").delay(2000).fadeOut("slow");
  $("#post-draft1").show().animate({height: '30px',opacity: 1},1000).delay(2000).animate({height: '0px',opacity: 0},1000);    

}

.hideme {
   background: blue;
   height: 0px; 
   opacity: 0; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="post-button1">Save Click</button>
<div class="hideme" id="post-draft1">This is a test div</div>