Question

我是学习JQuery的新手。我正在做一个从JQuery Novice到Ninja的样本，当我将鼠标移到下一个项目时，我得到一个错误。 #navigation_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>

Answer 1

我认为您的问题是第二个width: 'hide'函数的第一个.animate()中的.hover()：

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

我认为一旦动画完成，你的blob基本上会有display: none;，因此对其宽度或位置的进一步操作将没有可见效果。如果您说{width: 0}它应该可以正常工作：http://jsfiddle.net/ambiguous/YaVzd/

您还可以尝试在悬停动画之前添加显式.show()但会产生一些奇怪的效果：http://jsfiddle.net/ambiguous/uH9yJ/1/

Answer 2

看起来jQuery的版本是罪魁祸首。在 this fiddle 中，一切看起来都很好（使用jQuery 1.4.2）。但是，如果将版本更改为1.4.4（最新版本），则事情开始变得怪异。另外，我从本书下载了代码，它看起来像这个样本使用的jQuery版本1.4。

如果作者的更新日志正确，这是有道理的。根据{{3}}，最后一次更新是12/11/07，这可能意味着开发已停止，但至少可能意味着该插件已过时。

希望有所帮助。

进入下一个div时，Jquery悬停动作消失

2 个答案: