带有多个动画的jQuery语法

Question

我认为以下代码存在语法问题：＆＃39; hover＆＃39;动画似乎不起作用。我希望jQuery能够激活班级＆＃39; navigation_blob＆＃39;。 ps-我还在html中包含了jQuery缓动插件。

$(document).ready(function(){

  $('#jQueryFerrante > div').hide();

  $('#jQueryFerrante img').click(function() {
    $(this).next().animate({
      'height':'toggle'
    }, 'medium', 'easeOutBounce');
  });

$('<div id="navigation_blob"></div>').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,
        top: $(this).position().top
      },
      {
        duration: 'slow',
        easing: 'easeOutElastic',
        queue: false
      }
    );
  }, function() {// Mouse out function
    $('#navigation_blob').animate(
      {
        width: $(this).width() + 10,
        top: $(this).position().top
       },
       {
         duration:'slow',
         easing: 'easeOutCirc',
         queue: false
       });
    }
  );
});

  <div class="key-technical-skillsets">
      <h5>Key Technical Skill Sets</h5>
      <div id="navigation">
      <ol>
          <li><a href="#">jQuery</a></li>
          <li><a href="#">PHP</a></li>
          <li><a href="#">MySQL</a></li>
          <li><a href="#">CSS</a></li>
          <li><a href="#">Adobe Photoshop</a></li>
          <li><a href="#">Wordpress</a></li>
      </ol>
   </div>
</div>