Companionway

Meeting challenges with success

Adding fade in and down javascript

...you can make it better...

Javascript fade in and down

I wanted to change the header on the theme for my web site to display a slide down and in header.

The script needed to be a combination of two jquery animations.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $('#fadeInDown')
    .css('display', "none")
    .slideDown(2000)
    .animate(
      { opacity: 1 },
      { queue: false, duration: 2300 }
      );
    });
</script>

First we load in the jquery code from google nut this a single point of failure. If there is network interruption jquery code is lost. But in my instance if the network is failing then my web site probably is too.