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.

Now in my html I just need to put an id=fadeInDown at the appropriate place - that will invoke the code.

Note below how I changed the <div id=fadeInDown class="site-heading"> line here in my themes _layout/page.html file.

...
<header class="intro-header" style="background-image: url('{{ site.baseurl }}/{% if page.image %}{{ page.header-img }}{% else %}{{ site.header-img }}{% endif %}')">
    <div  class="container">
        <div class="row">
            <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
                <div id=fadeInDown class="site-heading">
                    <h1>{% if page.title %}{{ page.title }}{% else %}{{ site.title }}{% endif %}</h1>
                    <hr class="small">
                    <span class="subheading">{{ page.description }}</span>
                </div>
            </div>
        </div>
    </div>
</header>
...

This code works but I needed to make it as a part of the theme I use so first I wrote my own javascript .js file called js/custom.js.

I also added an <script>...</script> wrapped include line to the footer of my pages by adding this to _include/footer`.

<script src="{{ "/js/custom.js " | prepend: site.baseurl }}"></script>

Now I can write the file custom.js with this content:

// jquery scripting
 src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"

// quick n dirty fade down code - needs jquery
  $(document).ready(function(){
    $('#fadeInDown')
    .css('display', "none")
    .slideDown(1000)
    .animate(
      { opacity: 1 },
      { queue: false, duration: 1000 }
    );
  });

It does what I wanted… thought I would share it with you.

Enjoy,
-geoff-

Adding fade in and down javascript

...you can make it better...

Javascript fade in and down

CATALOG

FEATURED TAGS