jQuery - Почему IE8 не нравится эта функция?

Question

Краткий обзор структуры сайта:

Главный индекс php, который обслуживает локально хранимые php-файлы через ajax. (если это звучит беспорядочно, это потому, что это так)

У меня есть функция в основном файле индекса, которую я вызываю из загруженных скриптов ajax, и работает отлично везде, кроме IE.

я не могу получить значимое сообщение об ошибке:

Invalid argument. jquery-1.4.2.min.js, line 144 character 219 

NB Этот вопрос имеет непосредственное отношение к моей предыдущей: jQuery $el.position(...) is undefined

JQuery функции (index.php)

// nav 
var $el; 
var leftPos; 
var newWidth; 
var $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; 
     leftPos = $el.parent().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); 
     } 
    }); 
} 

Это называется во всех моих сценариях, просто делая:

navBar(); 

но по какой-то причине это вызывает проблемы в IE, и я не вижу причин, почему это так.

Answer 1

Я просто с ножом, но я бы рассмотреть это:

width: $magicLine.width($(".active a").width()) 

Это в объект передается в .animate(). То, что эта линия делает, устанавливает ширину $magicLine в ширину .active a, используя функцию .width() jQuery. То, что эта функция возвращает, является ссылкой на элемент jQuery, с которого вы начали, $magicLine. Этот метод позволяет вам последовательно связывать функции jQuery.

Таким образом, линия выше будет эффективно решать на:

width: $magicLine 

То, что я считаю, что вы хотите,:

width: $(".active a").width() 

Дайте ему шанс, надеюсь, что это!

Answer 2

Понял, казалось, эта линия:

$magicLine 
     .width($(".active a").width()) 
     .css("left", $(".active a").position().left); 

Изменено его

$magicLine.stop().animate({ 
     left: $(".active a").parent().position().left, 
     //width: $magicLine.width($(".active a").width()) 
     width: $(".active a").width() 
}); 

, но это делается в функции checkActive вызывается как раз перед этой линии в любом случае, так что я только что удалили это ...

Благодарим за помощь.