jQuery - IE 6 & 7 issue

[snowysweb]

Hi i have this code:

// JavaScript Document
jQuery(document).ready(menu);
function menu(){
jQuery("#menu li a").hover(function() {
jQuery(this).animate({
width: '230px'
}, 500);
},
function() {
jQuery(this).animate({
width: '260px'
}, 500);
}
);
}
jQuery(document).ready(paraHover);
function paraHover(){
jQuery(".main p").hover(function(){
jQuery(this).css("color", "#000000");
},
function(){
jQuery(this).css("color", "#404040");
}
);
}
jQuery(document).ready(hoverEffect);
function hoverEffect(){
jQuery(".lawnImages").css("filter", "alpha(opacity=40)");
jQuery(".lawnImages").css("-moz-opacity", "0.4");
jQuery(".lawnImages").css("-khtml-opacity", "0.4");
jQuery(".lawnImages").css("opacity", "0.4");

jQuery(".lawnImages").hover(function(){
jQuery(this).css("display", "block");
jQuery(this).animate({
opacity: 1,
}, 600);
},
function(){
jQuery(this).animate({
opacity: 0.4,
}, 600);
});
}
jQuery(document).ready(hoverEffect2);
function hoverEffect2(){
jQuery(".smallPicture a").hover(function(){
jQuery(this).css("display", "block");
jQuery(this).animate({
opacity: 0.4,
}, 600);
},
function(){
jQuery(this).animate({
opacity: 1,
}, 600);
});
}

Works fine in all other browsers apart from IE 6 & 7... can anyone tel me why?

www.activegardenmaintenance.co.uk (http://www.activegardenmaintenance.co.uk) is where it is active

[Iszak]

The problem is that when you're defining keys and values in the animate function you've got a comma after it and Internet Explorer is expecting another key/value but all it gets is a closing so change it from.

jQuery(this).animate({
opacity: 1,
}, 600);

to

jQuery(this).animate({
opacity: 1
}, 600);


That should produce..

// JavaScript Document
jQuery(document).ready(menu);
function menu(){
jQuery("#menu li a").hover(function() {
jQuery(this).animate({
width: '230px'
}, 500);
},
function() {
jQuery(this).animate({
width: '260px'
}, 500);
}
);
}
jQuery(document).ready(paraHover);
function paraHover(){
jQuery(".main p").hover(function(){
jQuery(this).css("color", "#000000");
},
function(){
jQuery(this).css("color", "#404040");
}
);
}
jQuery(document).ready(hoverEffect);
function hoverEffect(){
jQuery(".lawnImages").css("filter", "alpha(opacity=40)");
jQuery(".lawnImages").css("-moz-opacity", "0.4");
jQuery(".lawnImages").css("-khtml-opacity", "0.4");
jQuery(".lawnImages").css("opacity", "0.4");

jQuery(".lawnImages").hover(function(){
jQuery(this).css("display", "block");
jQuery(this).animate({
opacity: 1
}, 600);
},
function(){
jQuery(this).animate({
opacity: 0.4
}, 600);
});
}
jQuery(document).ready(hoverEffect2);
function hoverEffect2(){
jQuery(".smallPicture a").hover(function(){
jQuery(this).css("display", "block");
jQuery(this).animate({
opacity: 0.4
}, 600);
},
function(){
jQuery(this).animate({
opacity: 1
}, 600);
});
}


also another tip is you can specify more than one CSS property in your case like.

jQuery('.lawnImages').css({
'opacity': '0.4',
'filter': 'alpha(opacity=40)',
'-moz-opacity': '0.4',
'-khtml-opacity': '0.4',
});


Regards

[snowysweb]

Good man!