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.



Credits

cos Companionway
ale vim ALE
netlify Deploy to Netlify
vim VIM the editor
gtoolz gtoolz
gtoolz python tools Google Gemini