My goal is to create a smooth animation where 2 headers fade in and out, followed by the wrapping element shrinking in height.
Unfortunately, I'm encountering an issue where instead of animating, the element abruptly 'shrinks'. Would it be wise to implement CSS animations in some way?
For reference, here is the Fiddle link: 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);