Question

I have created a simple animation using jQuery and the mouseenter / mouseleave. It works fine in IE7, FF, Opera, Chrome and safari.

however, something is wrong in IE7 – nothing happens at all – I can’t even get alert boxes to pop up.

Could somebody please take a look at my code and tell me what I am doing wrong before I pull my hair out.

The offending page can be viewed at http://www.ypfservice.net – its part of a joomla install, hence bloated code.

Thanks a lot

E

enter code here$('a.panelImage').parent().addClass('panel');      

 var numberLinks = $('a.panelImage').length;

 for (var j=0; j<numberLinks; j++){

var currentLink = $('a.panelImage').eq(j);          

$('<div class="fred"></div>').insertAfter(currentLink);

var gtr=(currentLink.position().left)+'px';

 $(currentLink).next().css({ // ie div.fred
    'position':'absolute',
    'background-position':'0 0',
    'top':'222px',
    'left':gtr,
    'display':'none',
    'z-index':'1000',
    'width':'5px',
    'height':'5px',
    'overflow':'hidden',
    'backgroundImage':'url(http://www.ypfservice.net/templates/ypftemplate/images/foyerPreview.jpg)',
       });

 }

 $('div.panel').mouseenter(function () {

 $(this).find('div').animate({          
       height: '138px', 
       width: '184px' 
    }, 500)     
})
.mouseleave(function () { 
    $(this).find('div').animate({ 
       'width': '0px', 
       'height': '0px' 
    }, 500); 
}); //end function 

Answer 1

The evil Microsoft Comma has got you !!

 'backgroundImage':'url(http://www.ypfservice.net/templates/ypftemplate/images/foyerPreview.jpg)',

,,,,,,, they are coming to own us ! , , commas everywhere, they are here to make
programmers mad ! ,,,

a trailing comma within an object literal is a bad bad thing.. ,,,