Fonction de survol de jQuery

J'ai donc une fonction de survol qui est censée déplacer une flèche sous le corrent le lien que quelqu'un survole. Le problème est que la flèche ne revient jamais au lien actuel lorsque la personne s'arrête de survoler le lien. Cependant, si je règle correctement la gauche avec une valeur constante cela fonctionne. Quelqu'un a des idées?Fonction de survol de jQuery

Voici les 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' 
     }) 
    });

Et voici le code 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>

Source

2010-04-21 Danny

Pouvez-vous poster le code HTML/CSS pertinent? Le JS semble également incomplet. –

a mis à jour le code! – Danny

'xCordCurrent' ne semble pas être défini dans votre gestionnaire de sortie – SilentGhost

-1

L'exemple complet suivant a fonctionné pour moi:

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

Remarquez comment votre méthode d'assouplissement des easeOutBack est mis en commentaire. Selon le jQuery API les seules méthodes d'accélération valides sont linear et swing. J'espère que cela vous donne au moins un aperçu de votre problème.

Source

2010-04-21 13:41:56

Fonction de survol de jQuery

Répondre

Questions connexes