jQuery悬停功能

所以我有一个悬停功能，应该在某人移动的链接下移动箭头。问题是，当人停在链接上时，箭头从不返回到当前链接。但是，如果我正确设置了左侧的恒定值，它就可以工作。有人有主意吗？jQuery悬停功能

这里是JS：

$('#navbar li').hover(function(event) { 
    var currentId = '#' + $('body').attr('id') + '_link'; 
    var xCordCurrent = $(currentId).offset().left - ($('#arrow').width()/2); 
    var xCordHover = $(event.target).offset().left + ($(event.target).width()/2) - ($('#arrow').width()/2); 
     $('#arrow').animate(
     { left: xCordHover }, { 
      duration: 'slow', 
      easing: 'easeOutBack' 
     }) 
    }, function(event) { 
     $('#arrow').animate(
     { left: xCordCurrent }, { 
      duration: 'slow', 
      easing: 'easeOutBack' 
     }) 
    });

这里是HTML：

<div id="arrow"></div> 
<ul id="navbar"> 
    <li id="home_link"><a href="/">home</a></li> 
    <li id="portfolio_link"><a href="portfolio.php">portfolio</a></li> 
    <li id="resume_link"><a href="resume.php">resume</a></li> 
    <li id="photos_link"><a href="photography.php">photos</a></li> 
    <li id="blog_link"><a href="blog/">blog</a></li> 
</ul>

来源

2010-04-21 Danny

你能发布相关的HTML/CSS吗？此外，这里的JS看起来不完整。 – 2010-04-21 10:19:10

更新了代码！ – Danny 2010-04-21 12:51:05

'xCordCurrent'似乎没有在您的外部处理程序中定义 – SilentGhost 2010-04-21 12:55:39

-1

下完整的例子为我工作：

<html> 
    <head> 
     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script> 
     <script type="text/javascript"> 
      $(function() { 
       var current = $('#' + $('body').attr('id') + '_link'); 
       var oldLeft = current.position().left + (current.width()/2) - (arrow.width()/2); 
       var arrow = $('#arrow').css('left', oldLeft); 
       $('#navbar li').hover(function() { 
        var h = $(this); 
        var newLeft = h.position().left + (h.width()/2) - (arrow.width()/2); 
        arrow.stop().animate({ left: newLeft }, { 
         duration: 'slow', 
         //easing: 'easeOutBack' 
        }); 
       }, function() { 
        arrow.stop().animate({ left: oldLeft }, { 
         duration: 'slow', 
         //easing: 'easeOutBack' 
        }); 
       }); 
      }); 
     </script> 
     <style type="text/css"> 
      #navbar { margin: 0; padding: 0; overflow: auto; } 
      #navbar li { list-style: none; margin: 0; padding: 0; float: left; } 
      #navbar li a { margin: 1em; } 
      #arrow { background-color: #f00; height: 3px; width: 10px; left: 0; position: absolute; } 
     </style> 
    </head> 
    <body id="resume"> 
     <div id="arrow"></div> 
     <ul id="navbar"> 
      <li id="home_link"><a href="/">home</a></li> 
      <li id="portfolio_link"><a href="portfolio.php">portfolio</a></li> 
      <li id="resume_link"><a href="resume.php">resume</a></li> 
      <li id="photos_link"><a href="photography.php">photos</a></li> 
      <li id="blog_link"><a href="blog/">blog</a></li> 
     </ul> 
    </body> 
</html>

注意如何你放松方法easeOutBack已被注释掉。根据jQuery API，唯一有效的缓解方法是linear和swing。我希望这至少能让你对你的问题有所了解。

来源

2010-04-21 13:41:56

jQuery悬停功能

回答

相关问题