Функция jQuery hover

Итак, у меня есть функция зависания, которая, как предполагается, перемещает стрелу под корнетом, которую кто-то наводит. Проблема в том, что стрелка никогда не возвращается к текущей ссылке, когда человек перестает зависать по ссылке. Однако, если я правильно установил значение с постоянным значением, он будет работать. У кого-нибудь есть идеи?Функция jQuery hover

Вот это ЯШ:

$('#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

ответ

Смежные вопросы