Странная ошибка в строке 156 в jQuery при наведении курсора

Question

Проблема:

• Сайт работает в Firefox, Chrome, Safari, но не в IE (7 и 8).
• Ошибка в строке 1 символа 1 в modernbrowsereffects.js - но почему?
• При наведении курсора на левое меню появляется больше ошибок

EDIT:

Я думаю, что у меня есть грешник! Но я не могу понять, как это исправить. Когда я удаляю это из файла JS, все работает как шарм:

//Left menu :hover-effect
$('ul.menu li a:not(.active)') 
    .css({backgroundPosition: '262px 12px'}) 
    .mouseover(function(){ 
       $(this).stop().animate({backgroundPosition: '248px 12px'})
       })
    .mouseout(function(){ 
       $(this).stop().animate({backgroundPosition: '262px 12px'}) 
});

//Left menu :hover-effect (Child)
$('ul.menu li ul li a:not(.active)')
    .css({backgroundPosition: '262px 7px'}) 
    .mouseover(function(){ 
       $(this).stop().animate({backgroundPosition: '248px 7px'})
       })
    .mouseout(function(){ 
       $(this).stop().animate({backgroundPosition: '262px 7px'}) 
});

Подробное описание:
У меня ОЧЕНЬ странная проблема на этой странице, которую я сделал .

У меня есть файл JS, который называется ModersBrowserEffects.js, в котором я произвел множество эффектов на сайте. Анимации и прочее.

Все прекрасно работает во всех браузерах, кроме IE, даже не IE8.

В нем говорится, что ошибки находятся в строке 1 и символе 1 в ModersBrowserEffects.js, но я не понимаю, почему $ должно быть ошибкой ??

Если этого было недостаточно ... Если вы наведите курсор на левое меню (с анимированным фоновым расположением, заданным в ModernBrowserEffects.js), появится много новых ошибок. Теперь его jQuery с ошибками в строке 156 ...

Answer 1

IE не позволяет / не должен позволять вам анимировать фоновые позиции таким образом сразу же. Видимо, вы можете использовать CSS Hooks, но я не пробовал. Если вы перейдете по этой ссылке , появится более подробный ответ, а также ссылка на плагин, который предоставит вам эту функциональность.

Интересно, что если вы измените свою версию jQuery на 1.4.2, она должна работать. См. пример

Answer 2

У вас есть проблема с маршрутизацией, вы используете относительные пути в своем HTML.

// this one is absolute
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js">   </script>

// these are relative
<script type="text/javascript" src="/scripts/jquery.example.js"></script>
<script type="text/javascript" src="/scripts/jquery.cycle.all.min.js"></script>
<script type="text/javascript" src="/scripts/topbillede.js"></script>
<script type="text/javascript" src="/scripts/slimbox2.js"></script>    
<script type="text/javascript" src="/scripts/modernBrowserEffects.js"></script>

Таким образом, когда вы находитесь на первой странице, браузер загрузит http://bevola.dk/scripts/modernBrowserEffects.js, который существует, но когда вы находитесь на подстранице, браузер попытается, например, загрузить http://bevola.dk/om-bevola/koncepter/globalpartner/scripts/modernBrowserEffects.js, что вызовет Ошибка 404 .

Сделайте пути вашего скрипта абсолютными, чтобы исправить это:

<script type="text/javascript" src="http://bevola.dk/scripts/modernBrowserEffects.js"></script>

Почему он ломается только в IE? Я предполагаю, что только IE использует части скриптов, которые не могут быть загружены.

Answer 3

Проблема заключается в том, что со сценарием, как написано в редактировании.Я переписал скрипт, поэтому теперь он не делает ошибок.Но теперь он не анимируется в IE.Это происходит в любом другом браузере.Сценарий:

//Leftmenu :hover-effect
    $('ul.menu li a:not(.active)').css({backgroundPosition: '262px 12px'});
    $('ul.menu li a:not(.active)').hover(function() {
          $(this).stop().animate({backgroundPosition: '248px 12px'}, 150); 
      }, function() {
          $(this).stop().animate({backgroundPosition: '262px 12px'}, 150); 
    }); 

//Leftmenu :hover-effect (Child)
    $('ul.menu li ul li a:not(.active)').css({backgroundPosition: '262px 7px'});
    $('ul.menu li ul li a:not(.active)').hover(function() {
          $(this).stop().animate({backgroundPosition: '248px 7px'}, 150); 
      }, function() {
          $(this).stop().animate({backgroundPosition: '262px 7px'}, 150); 
    });

Ошибка устранена, но кто-нибудь из вас может сказать, почему она не анимируется в IE ??

Answer 4

Попробуйте удалить следующий код в конце файла

(jQuery)