奇怪的jQuery问题-鼠标悬停行为怪异_Jquery

奇怪的jQuery问题-鼠标悬停行为怪异

jquery

奇怪的jQuery问题-鼠标悬停行为怪异,jquery,Jquery,我试图实现一个非常基本的鼠标在我的菜单上的效果，使动画背景颜色出现在标签后面。它正在工作，但在一些标签上，背景仅在几秒钟内消失，而在其他标签上则表现正常。我正在粘贴三个文件的来源，以便您复制该问题 4.php` <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://

我试图实现一个非常基本的鼠标在我的菜单上的效果，使动画背景颜色出现在标签后面。它正在工作，但在一些标签上，背景仅在几秒钟内消失，而在其他标签上则表现正常。我正在粘贴三个文件的来源，以便您复制该问题

4.php`

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <title>StarTrackr!</title>

  <link rel="stylesheet" href="css/4.css" type="text/css" media="screen" charset="utf-8" /> 

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
  <script type="text/javascript" src="js/4.js"></script>
</head>
<body>

      <div id="navigation">
        <ul>
          <li><a href="#">Home</a></li>
          <li><a href="#">Buy Now</a></li>
          <li><a href="#">About Us</a></li>
          <li><a href="#">Products</a></li>
          <li><a href="#">Gift Ideas</a></li>
          <li><a href="#">FAQ</a></li>
        </ul>
      </div>
    <div id="log"></div>
        </body>
</html>

4.js

请参阅

我已经对你的JS和CSS做了一系列的修改

JS: 更新：我已经添加了您期望的动画。参考此

JS:

把它放在一个很奇怪的地方。如果我只是简单地将jQuery的版本更改为1.4以下的版本，那么这段代码可以工作，但在这之后就不行了。jQuery中的一个bug？嗨，Siva，我知道你做了什么，但是所有的动画都随着这些更改而丢失了。我可以通过简单地更改原始代码中的mouseout函数来隐藏导航blob来实现这一点。使用原始脚本，查看背景在消失之前是如何向左移动的。我想保持这种效果。谢谢您的时间。@Nick:我已经用您期望的动画更新了我的答案。@Nick:现在我要睡觉了。如果您还需要更多帮助，我明天会检查并回复您。请在我的源代码中更改为，看看我的意思。谢谢你抽出时间。

#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; 
}

p#intro {
  clear: both;
  margin-top: 10px;
}

$(function(){
    $('<div id="navigation-blob"></div>').css({
        width: $('#navigation li:first a').width() + 10,
    height: $('#navigation li:first a').height() + 10
    }).appendTo('#navigation').hide();
$('#log').append('Test.<br/>');

    $('#navigation a').mouseover(function(){ 
        $('#log').append('Handler for .mouseover() called.<br/>');
        // Mouse over function
    $('#navigation-blob')
            .show()
            .animate(
            {width: $(this).width() + 10, left: $(this).position().left},
        {duration: 'slow', easing: 'easeOutElastic', queue: false}
    );
    });
    $('#navigation a').mouseout(function(){  
      $('#log').append('Handler for .mouseout() called.<br/>');
        // Mouse out function
    var leftPosition = $('#navigation li:first a').position().left;
    $('#navigation-blob')
            .animate(
            {width:'hide'},
            {duration:'slow', easing: 'easeOutCirc', queue:false}
            ).animate({left: leftPosition}, 'fast' )
            $('#log').append('Handler for .mouseout()2 called.<br/>');
  });
});

$(function(){
    $('#log').append('Test.<br/>');

    $('#navigation a').hover(
        function() {
            $('#log').append('Handler for .mouseover() called.<br/>');
            // Mouse over function
            $(this).attr('class', 'navigation');
        },
        function() {
            $('#log').append('Handler for .mouseout() called.<br/>');
            // Mouse out function
            $(this).removeAttr('class');
            $('#log').append('Handler for .mouseout()2 called.<br/>');            
        }
    );
});

#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 {
    background-color: #c0ffee;
    position: relative;
}

p#intro {
  clear: both;
  margin-top: 10px;
}

$(function(){
    $('#log').append('Test.<br/>');

    $('<div id="navigation-blob"></div>').css({
        width: $('#navigation li:first a').width() + 10,
        height: $('#navigation li:first a').height() + 10
    }).appendTo('#navigation').hide();

    $('#navigation a').hover(
        function() {
            $('#log').append('Handler for .mouseover() called.<br/>');

            $('#navigation-blob')
                .show()
                .animate({
                    width: $(this).width() + 10, 
                    left: $(this).position().left
                },
                {
                    duration: 'slow', 
                    queue: false
                });
        },
        function() {
            $('#log').append('Handler for .mouseout() called.<br/>');

            $('#navigation-blob')
                .show()
                .animate({
                    width: $(this).width() + 10,
                    left: $(this).position().left
                }, 'fast');

            $('#log').append('Handler for .mouseout()2 called.<br/>');            
        }
    );
});