Weird error on line 156 in jQuery when hover

Problem:

• Site works in Firefox, Chrome, Safari but not in IE (7 & 8).
• Error at line 1 character 1 in modernbrowsereffects.js - but why?
• More errors appears when hovering over left menu

EDIT:

I think I've got the sinner! But I can't seem to find out how to fix it. When I remove this from the JS file everything works like a charm:

//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()开发者_如何学Python.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'}) 
});

Detailed description:

I have this VERY weird problem on this page I've done.

I have a JS file, called ModersBrowserEffects.js, where I have made a lot of effects on the site. Animations and such.

It all works great in all browsers exept IE, not even IE8.

It says that the errors is at line 1 and character 1 in ModersBrowserEffects.js, but I can't see why a $ should be an error??

If this wasn't enough... If you hover on the left menu (which has animated background posistion, specified in ModernBrowserEffects.js), a lot of new errors appears. Now its jQuery that has some erros on line 156...

IE doesn't/shouldn't let you animate background positions this way straight-off the bat. Apparently you can use CSS Hooks to do it, but I've not tried. If you follow this link there is a more detailed answer as well as a link to a plugin which will give you this functionality.

Interestingly enough if you change your version of jQuery to 1.4.2 it should work. See example

Try removing the following code at the end of the file

(jQuery)

You have a pathing problem, you're using relative paths in your 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>

So when you're are on the front page the browser will load http://bevola.dk/scripts/modernBrowserEffects.js which exists, but when you're on a sub page the browser will try for example to load http://bevola.dk/om-bevola/koncepter/globalpartner/scripts/modernBrowserEffects.js which will raise a 404 Error.

Make your script's paths absolute to fix it:

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

Why it only breaks in IE? I guess only IE uses parts of the scripts which cannot be loaded.

The problem is something with the script, as written in the EDIT. I've rewritten the script, so it now doesn't make any errors. But now it doesn't animate in IE. It does in every other browser. The script:

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

Error solved, but can any of you tell me why it won't animate in IE??