javascript

jQuery bouncing header

Here is the jQuery code and CSS to make the cool/annoying bouncing header!

jQuery Code

<script type="text/javascript">
$(document).ready(function() {
  $("#top-content").slideDown(1000).
    animate({height: "190px"}).
    animate({height: "200px"}).
    animate({height: "195px"}).
    animate({height: "200px"}, function() {
      $("#bottom-content").css({marginBottom:"20px"});
  });
});
</script>

CSS
<style>
#top-content {
  height: 200px;
  display: none;
}
</style>

Thats it! Have fun!

** Note **

Random Javascript Header

Ok so I really wanted a random changing banner on the site that would not hinder page load so I decided to use javascript so that loading would be dependent on the users computer not the server, not to mention I really did not want to do this via php because well, I thought it would be best not to use the server to figure out which banner to use. So just in case anyone would like to do the same here is the code I used to do it.