Jquery hover action diappears when going to next div
<p>Im new to learning JQuery. Im doing a sample from JQuery Novice to Ninja and Im getting an error when I move my mouse over then next item. The #navigation_blob dissapears it could be a css problem for all I know but run the code tell me what you think I need to do. Im using the easing plugin</p>

<pre><code>$(document).ready(function () {

        $('&lt;div id="navigation_blob"&gt;&lt;/div&gt;').css({
            width: $('#navigation li:first a').width() + 10,
            height: $('#navigation li:first a').height() + 10
        }).appendTo('#navigation');

        $('#navigation a').hover(function () {
            $('#navigation_blob').animate(
                { width: $(this).width() + 10, left: $(this).position().left },
                { duration: 'slow', easing: 'easeOutElastic', queue: false }
            )
        }, function () {
            $('#navigation_blob')
                .stop(true)
                .animate(
                    {width: 'hide'},
                    {duration: 'slow', easing: 'easeOutCirc', queue: false}
                )
                .animate({
                    left: $('#navigation li:first a').position().left }, 'fast'
                );                   
        });
    });


&lt;style type="text/css"&gt;
   #navigation li
   {
       display:inline-block
   }
   #navigation_blob 
   {
       background-color:Blue; position:absolute; float:left
   }       
&lt;/style&gt;
&lt;ul id="navigation"&gt;&lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href="#"&gt;About Us&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href="#"&gt;Buy!&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href="#"&gt;Gift Ideas&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;
</code></pre>
