jQuery $ el.position (...) non è definito

Question

Ho una barra di navigazione che utilizza un altro elemento <li> nell'elenco per creare un effetto di sottolineatura che si anima sotto l'elemento al passaggio del mouse e si riattiva sull'elemento attivo al passaggio del mouse.

Fiddle: http://jsfiddle.net/jP59W/

sembra di grande lavoro in Chrome e Firefox, ma in IE (8) ottengo un invalid argument error ma non riesco a vedere quello che potrebbe essere la causa di esso.

Anche se funziona in Firefox, getta ancora questo errore aswell:

$el.position(...) is undefined che è questa linea:

leftPos = $el.position().left; 

HTML

<div id="navbar"> 
    <ul class="clearfix"> 
     <li class="active"> 
      <a id="myoeHome" href="#">Welcome</a> 
     </li> 
     <li> 
      <a id="myAccount" href="#">Your Profile</a> 
     </li> 
     <li> 
      <a id="referAFriend" href="#">Refer A Friend </a> 
     </li> 
     <li> 
     <a id="referralReport" href="#">View Rewards </a> 
     </li> 
     <li> 
      <a id="shoutandShare" href="#">Write a Review </a> 
     </li> 
    </ul> 
</div> 

CSS

#navbar { 
    position: relative; 
    background-color: #ffffff; 
    width: 990px; 
    margin: -21px 0 0 0; 

    padding: 20px 0 0 0; 
    height: 35px; 

    zoom: 1; 
} 

#navbar ul { 
    width: 945px; 
    list-style: none; 
    padding: 0 0 0 40px; 
    margin: 0 auto; 
    text-align: center; 
    position: relative; 
    top:-13px; 

    *margin: -25px auto 0 auto; 
} 

#navbar ul li { 
    display: inline-block; 
    text-align: left; 

    /* padding: 0 1px 0 1px; */ 

    /* margin: 0 60px 0 5px; */ 

    margin: 0 0 0 0; 
    padding: 10px 0 24px 0; 
    width: 185px; 

    *display: inline; 
    *zoom: 1; 
    *margin: 25px -11px 0 0; 
} 

#navbar ul li a { 
    font-family: Helvetica, Arial; 
    font-size: 18px; 
    color: #002e55; 
    text-align: center; 
    padding-bottom: 24px; 

    *display: inline; 
    *float: left; 

} 

#magic-line { 
    position: absolute; 
    bottom: 8px; 
    left: 0; 
    height: 3px; 
    background: url("http://www.4playtheband.co.uk/assets/nav-magic-line.png") no-repeat center bottom; 
    margin: 0 !important; 
    padding: 0 !important; 

    *bottom: 7px; 
    *z-index: 999; 
    *height: auto; 
} 

#navbar ul li a:hover { 
    height: 4px; 
    /*border-bottom: 3px solid #002e55;*/ 

    zoom: 1; 

    *margin-top: -39px; 

} 

#navbar ul li a.active { 
    background: url("../images/psd/active-nav-bg.png") no-repeat 49% 2px; 
    height: 4px; 
    border-bottom: 3px solid #002e55; 

    zoom: 1; 
} 

jQuery

// nav 
var $el, leftPos, newWidth, 
$mainNav = $("#navbar ul"); 

$mainNav.prepend("<li id='magic-line'></li>"); 
var $magicLine = $("#magic-line"); 

function navBar() { 
    // console.log('navBar start'); 
    function checkActive() { 
     // console.log('check active'); 
     // Hide magic line if nav bar has no active element 
     if($('#navbar ul').children('.active').length < 1) { 
      $magicLine.hide(); 
      //console.log($('#navbar ul').children('.active').length < 1); 
      //console.log($('#magic-line')); 
      //console.log('hide'); 
     } 
     else { 
      $magicLine.stop().animate({ 
       left: $magicLine.css('left', $(".active a").css('left')), 
       width: $magicLine.width($(".active a").width()) 
      }); 
     } 
    } 
    checkActive(); 
    $magicLine 
     .width($(".active a").width()) 
     .css("left", $(".active a").position().left) 
     .data("origLeft", $magicLine.position().left) 
     .data("origWidth", $(".active a").width()); 

    // $("#navbar ul li a").hover(function() { 
    // apply hover function to li instead and just just el to it's child 
    $("#navbar ul li").hover(function() { 
     // $el = $(this); 
     $el = $(this).children('a'); 
     leftPos = $el.position().left; 
     newWidth = $el.width(); 
     $magicLine.stop().animate({ 
      left: leftPos, 
      width: newWidth 
     }, 600); 
    }, function() { 
     if($('#navbar ul').children('.active').length < 1) { 
      $magicLine.stop(); 
      checkActive(); 
     } else { 
      $magicLine.stop().animate({ 
       left: $magicLine.data("origLeft"), 
       //width: $magicLine.data("origWidth") 
       width: $magicLine.width($(".active a").width()) 
      }, 600); 
     } 
    }); 
} 

$(document).ready(function() { 
    $magicLine.width($(".active a").width()); 
    navBar(); 
}); 

Answer 1

trovato il problema.

Modificato

leftPos = $el.position().left; 

a

leftPos = $el.parent().position().left; 

e che risolto.

Answer 2

ho visto due casi in cui un tale problema che accade:

1. la voce che si sta verificando è attualmente nascosto (non fu mai mostrato) o non è nel DOM del documento e quindi non ha coordinate reali (si possibile creare frammenti DOM)

2. l'oggetto jQuery (lista $el nel tuo caso) è vuoto; si può sapere testando $el.length == 0

Dal momento che la chiamata parent() ha lavorato per voi, il vostro problema era sicuramente caso (1).