jQuery hover function

그래서 나는 누군가가 가리키는 링크 인 corrent 아래에서 화살표를 움직이게되어있는 호버 기능을 가지고있다. 문제는 링크를 통해 마우스를 가져 가면 화살표가 현재 링크로 되돌아 가지 않는다는 것입니다. 그러나, 내가 왼쪽으로 올바르게 일정한 값으로 설정하면 작동합니다. 누구든지 아이디어가 있습니까? 여기 jQuery hover function

은 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는 불완전 해 보입니다. –

이 (가) 코드를 업데이트했습니다. – Danny

'xCordCurrent'가 아웃 핸들러에 정의되어 있지 않은 것 같습니다. – SilentGhost

-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 hover function

답변

관련 문제