jQuery $ el.position（...）未定义

我有一个导航栏，它使用列表中的另一个<li>元素创建一个下划线效果，该效果在悬停元素下面进行动画处理，并在鼠标移出时回到活动元素上。

似乎在Chrome和Firefox，但在IE工作伟大的（8）我得到一个invalid argument error，但我看不出有什么可以导致它。

即使它工作在Firefox，它仍然抛出这个错误藏汉：

$el.position(...) is undefined这是这一行：

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(); 
});

来源

2013-02-27 martincarlin87

这对我无能为力 - 我看不到任何类型的动画：Ubuntu 12.04上的Firefox 19.0。 Firebug报告这个错误：'TypeError：$ el.position（...）未定义' – 2013-02-28 17:53:50

谢谢，它是你尝试过的小提琴还是你在测试脚本上实现代码？小提琴为我工作在铬，但该网站本身似乎并不想加载，即对我来说。将检查在Firefox中的错误，但这是一个很好的帮助，实际上知道发生了什么，可能应该已经尝试过之前，即错误测试。 – martincarlin87 2013-03-01 09:06:55

我只试过小提琴。我也刚刚尝试了使用Chrome的小提琴（再次，在我的Ubuntu 12.04桌面上），我看不到动画。我改变了小提琴使用你的答案中的代码，仍然没有任何动画。 – 2013-03-01 14:06:45

发现这个问题。

改变

leftPos = $el.position().left;

到

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

并解决它。

来源

2013-03-01 12:37:14 martincarlin87

我已经看到了两个情况下，当这样的问题发生：

要检查当前是隐藏的（从来没有显示），或者是不是在文档DOM的项目，因此没有真正的坐标（你可以创建DOM片段）
jQuery对象（您的案例中的$el列表）为空;您可以通过测试$el.length == 0

知道由于parent()呼吁为你工作，你的问题是肯定的情况下（1）。

来源

2016-03-30 03:41:48

jQuery $ el.position（...）未定义

回答

相关问题