Javascript 当转到下一个div时，Jquery悬停动作将显示

我刚开始学习JQuery。我正在做一个从JQuery新手到忍者的示例，当我将鼠标移到下一个项目上时，我发现了一个错误。#导航#blob消失了，据我所知，这可能是一个css问题，但运行代码告诉我你认为我需要做什么。我正在使用这个插件

$(document).ready(function () {

        $('<div id="navigation_blob"></div>').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'
                );                   
        });
    });


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

$（文档）.ready（函数（）{
$（''）.css({
宽度：$（'#导航li:first a'）。宽度（）+10，
高度：$（'#导航li:first a'）。高度（）+10
}).appendTo（“#导航”）；
$（'#导航a'）。悬停（函数（）{
$（“#导航_blob”）。设置动画(
{width:$（this.width（）+10，left:$（this.position（）.left}，
{持续时间：'slow'，缓和：'easeOutElastic'，队列：false}
)
}，函数（）{
$（“#导航_blob”）
.停止（正确）
.制作动画(
{宽度：'隐藏'}，
{持续时间：'slow'，easeOutCirc'，队列：false}
)
.制作动画({
左：$（“#导航li:first a”）.position（）.left}，“快速”
);                   
});
});
#导航李
{
显示：内联块
}
#导航块
{
背景色：蓝色；位置：绝对；浮动：左侧
}       

我认为您的问题在于第一个

中的
宽度：'hide'
。第二个
函数的animate（）
。hover（）

函数：

//...
}, function () {
    $('#navigation_blob')
        .stop(true)
        .animate(
            {width: 'hide'},
//...

我认为你的blob基本上会有

显示：无动画完成后，对其宽度或位置的进一步操作将不会产生可见效果。如果你说
{width:0}
应该可以：

您也可以尝试在动画中悬停之前添加显式的
.show（）
，但这会产生一些奇怪的效果：
我认为您的问题是第二个
函数的
第一个
中的
宽度：“hide'
。animate（）

//...
}, function () {
    $('#navigation_blob')
        .stop(true)
        .animate(
            {width: 'hide'},
//...

我认为你的blob基本上会有
显示：无动画完成后，对其宽度或位置的进一步操作将不会产生可见效果。如果你说
{width:0}
应该可以：

您还可以尝试在动画中悬停之前添加显式的
.show（）
，但这会产生一些奇怪的效果：
看起来jQuery的版本是罪魁祸首。在中，一切看起来都很好（使用jQuery 1.4.2）。但是，如果将版本更改为1.4.4（最新版本），事情就会开始变得奇怪。另外，我从这本书中下载了代码，它看起来像这个示例使用的jQuery版本1.4

如果作者的更新日志是正确的，这是有意义的。根据最新版本，上一次更新是2007年12月11日，这可能意味着开发已经停止，但至少可能意味着插件已经过时

希望这能有所帮助。
看来jQuery的版本是罪魁祸首。在中，一切看起来都很好（使用jQuery 1.4.2）。但是，如果将版本更改为1.4.4（最新版本），事情就会开始变得奇怪。另外，我从这本书中下载了代码，它看起来像这个示例使用的jQuery版本1.4

如果作者的更新日志是正确的，这是有意义的。根据最新版本，上一次更新是2007年12月11日，这可能意味着开发已经停止，但至少可能意味着插件已经过时

希望有帮助