j查询定时通知点击

Question

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

我希望它height从0px to 30px().delay(2000).hideme显示为display: block;，同时保留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>

Answer 2

要对高度进行动画处理，您可以使用.animate()jQuery方法。

$('.hideme').animate({height:'30px'});

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

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

而不是.delay()您可以使用fadeIn的回调来在fadeIn完成时对.hideme的高度进行动画处理：

$("#post-draft1").fadeIn("slow", function(){
$('.hideme').animate({height:'30px'});
});

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