How to create navigation animation with jQuery
<p>I am trying to create an animation using jQuery which allows for a bubble to appear on the hover event as the user hovers over the list items identified by the id 'navigation'.  I have created a div identified by the id 'navigation_blob' which I would like to appear upon each item which is being hovered on.  For some reason, however, the height stays at 0.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function() {
  $('&lt;div id="navigation_blob"&gt;&lt;/div&gt;').css({
    width: 0,
    height: $('#navigation li:first a').height() + 10
  }).appendTo('#navigation');

  $('#navigation a').hover(
    function() { // Mouse over function
      $('#navigation_blob').animate({
        width: $(this).width() + 10,
        left: $(this).position().left
      }, {
        duration: 'slow',
        easing: 'easeOutElastic',
        queue: false
      });
    },
    function() { // Mouse out function
      $('#navigation_blob').animate({
        width: $(this).width() + 10,
        left: $(this).position().left
      }, {
        duration: 'slow',
        easing: 'easeOutCirc',
        queue: false
      });
    }
  );
});</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>#head {
  padding-left: 20px;
}

#navigation {
  margin: 0 0 10px 0;
  padding: 0;
  list-style-type: none;
  position: relative;
  z-index: 1;
  /* overwrite base */
  float: none;
  width: 100%;
}

#navigation ul {
  margin: 0;
  padding: 0;
}

#navigation li {
  display: inline;
  margin: 0;
  padding: 0;
}

#navigation a {
  color: #015287;
  display: inline-block;
  padding: 5px;
  text-decoration: none;
}

#navigation_blob {
  top: 0;
  background-color: #c0ffee;
  position: absolute;
  z-index: -1;
  border-radius: 15px;
}

p#intro {
  clear: both;
  margin-top: 10px;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;div class="key-technical-skillsets"&gt;
  &lt;h5&gt;Key Technical Skill Sets&lt;/h5&gt;
  &lt;div id="navigation"&gt;
    &lt;ol&gt;
      &lt;li&gt;&lt;a href="#"&gt;jQuery&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;PHP&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;MySQL&lt;a/&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;CSS&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Adobe Photoshop&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Wordpress&lt;/a&gt;&lt;/li&gt;
    &lt;/ol&gt;
  &lt;/div&gt;</code></pre>
</div>
</div>
</p>