收缩元件高度与延迟

Question

我想让2个标题淡入和淡出，然后我希望元素包装在高度上缩小。

我遇到的问题是它没有动画，只是突然缩小了。我应该以某种方式使用CSS动画吗？

小提琴链接：http://jsfiddle.net/danieljoseph/37eAC/2/

JQuery的

$('.section-intro h1').delay(1000).fadeIn(1000).delay(2000).fadeOut(1000);
$('.section-intro h2').delay(5000).fadeIn(1000).delay(2000).fadeOut(1000);
$('.section-intro div').delay(9000).fadeIn(1000);
setTimeout(function(){
   $(".section-intro").addClass("animate");
}, 12000);

Answer 1

使用jQuery的animate函数来解决这个问题：

$('.section-intro').delay(12000).animate({height: "20px"}, 500);