jQuery $el.position(...) n'est pas défini

J'ai une barre de navigation qui utilise un autre <li> élément dans la liste pour créer un soulignement effet qui anime sous le planait élément et anime arrière de l'élément actif de la souris.

Violon: http://jsfiddle.net/jP59W/

Il semble fonctionner à merveille dans Chrome et Firefox, mais sous IE (8), je reçois un invalid argument error mais je ne vois pas ce qui pourrait être la cause.

Même si elle fonctionne dans Firefox, ça en jette toujours cette erreur aswell:

$el.position(...) is undefined qui est cette ligne:

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

OriginalL'auteur martincarlin87 | 2013-02-27