jQuery $ el.position (...) अपरिभाषित

Question

मेरे पास एक नौसेना बार है जो सूची में एक और <li> तत्व का उपयोग करता है जो एक अंडरलाइन प्रभाव बनाने के लिए है जो आच्छादित तत्व के नीचे एनिमेट करता है और माउस आउट पर सक्रिय तत्व पर वापस एनिमेट करता है।

फिडल: http://jsfiddle.net/jP59W/

यह क्रोम और फ़ायरफ़ॉक्स में लेकिन IE में महान काम करने के लिए (8) मैं एक invalid argument error मिल लेकिन मैं क्या यह कारण हो सकता है नहीं देख सकते हैं लगता है।

$el.position(...) is undefined जो इस लाइन है:

भले ही यह फ़ायरफ़ॉक्स में काम करता है, यह अभी भी इस त्रुटि के रूप में अच्छी फेंकता

leftPos = $el.position().left; 

एचटीएमएल

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

सीएसएस

#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

समस्या मिला।

leftPos = $el.position().left; 

बदल दिया

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

करने के लिए और है कि यह हल किया।

Answer 2

मैं दो मामलों को देखा है जब इस तरह के एक समस्या होता है:

1. आइटम आप (कभी नहीं दिखाया गया था) की जाँच कर रहे वर्तमान में छिपा हुआ है या दस्तावेज़ डोम में नहीं है और इस प्रकार कोई वास्तविक निर्देशांक (है आप डोम टुकड़े बना सकते हैं)

2. jQuery ऑब्जेक्ट ($el आपके मामले में सूची) खाली है; आप, के बाद से parent() कॉल आप के लिए काम किया $el.length == 0

परीक्षण से पता कर सकते हैं आपकी समस्या को सबसे निश्चित रूप से था मामला (1)।