Hello, I'm having a rather common problem (or so it seems, after some googling around...) with IE messing both bold text AND transparent pngs while animating opacity using jQuery.
You can view the sample here: http://dev.gentlecode.net/dotme/index-sample.html (only occurs in IE, obviously)
I've seen some blog posts saying the fix is to remove the filter attribute but I'm not sure how to apply it to the script I'm using since I got it from a tutorial and am still learning jQuery...
The script goes as follows:
$('ul.nav').each(function() {
var $links = $(this).find('a'),
panelIds = $links.map(function() { return this.hash; }).get().join(","),
$panels = $(panelIds),
$panelWrapper = $panels.filter(':first').parent(),
delay = 500;
$panels.hide();
$links.click(function() {
var $link = $(this),
link = (this);
if ($link.is('.current')) {
return;
}
$links.removeClass('current');
$link.addClass('current');
$panels.animate({ opacity : 0 }, delay);
$panelWrapper.animate({
height: 0
}, delay, function() {
var height = $panels.hide().filter(link.hash).show().css('opacity', 1).outerHeight();
$panelWrapper.animate({
height: height
}, delay);
});
return false;
});
var showtab = window.location.hash ? '[hash=' + window.location.hash + ']' : ':first';
$links.filter(showtab).click();
});
I would appreciate if someone could go over it and show me how to fix the opacity issue. Will the filter method also fix the trouble I'm having with transparent pngs having pixelated ugly borders like the bold type as well?
Thanks in advance for all help!
