jquery - jQuery $el.position(...) は未定義です

Question

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

score 6 · Accepted Answer

このような問題が発生する 2 つのケースを見てきました。

チェックしている項目が現在非表示になっている (表示されたことがない) か、ドキュメント DOM にないため、実際の座標がありません (DOM フラグメントを作成できます)
jQuery オブジェクト (この$el場合は list ) は空です。テストで知ることができます$el.length == 0

通話がうまくいったので、parent()問題はおそらくケース (1) でした。

score 2 · Accepted Answer

問題が見つかりました。

かわった

leftPos = $el.position().left;

に

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

そしてそれはそれを解決しました。

jquery - jQuery $el.position(...) は未定義です

2 に答える 2

Related

Reference