0

我正在尝试在我的菜单上实现非常基本的鼠标悬停效果，因此动画背景颜色出现在标签后面。它正在工作，但在某些标签上，背景会在几秒钟内消失，而在其他标签上则正常。我正在粘贴三个文件的源代码，以便您复制问题。

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.css

`

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

`

4.js

`

$(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/>');
  });
});

`

4

1 回答 1

0

参考现场演示

我已经对您的JS和CSS.

JS：

$(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/>');            
        }
    );
});​

CSS：

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

更新：

我已经添加了您预期的动画。参考这个LIVE DEMO 2

JS：

$(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/>');            
        }
    );
});​
于 2012-06-25T18:14:30.323 回答