Question

我希望fade动画发生加上，.hideme的高度也会在0px to 30px期间().delay(2000)增长}。

而不是.hideme在点击时显示为display: block;，我希望它height从0px to 30px转到().delay(2000)同时保留fade动画。

＆＃13;

$(document).ready(function() {
  $("#post-draft1").hide();
  $("#post-button1").click(postNotification);
});

function postNotification() {
  $("#post-draft1").fadeIn("slow").delay(2000).fadeOut("slow");
}

＆＃13;

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

＆＃13;

<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>

＆＃13;

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>

Answer 2

要为高度设置动画，您可以使用$('.hideme').animate({height:'30px'}); jQuery方法。

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

但首先，您必须将高度设置为次要值：

.delay()

fadeIn可以使用.hideme的回调来fadeIn完成$("#post-draft1").fadeIn("slow", function(){ $('.hideme').animate({height:'30px'}); });的高度动画，而不是{{1}}：

{{1}}

请参阅：http://api.jquery.com/animate/

jQuery定时通知onclick

2 个答案: