Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1970
  • Last Modified:

Black border on jQuery animations in IE 6-8

I don't know if my use of jQuery even qualifies me as a "Script Kitty". I taught it to myself without even having any true JavaScript experience and am sure that while functional, many of my implementations could/should be written completely differently. With that said, I'm now running into an issue with some animations so please go easy on me if this code is a joke.

When the code below runs I'm seeing a thin, ragged black border around all of the elements that I'm animating such as div#consultantsContent img.headline in all versions of IE. In my implementation the image referenced is a PNG so that was the first place I looked. Even once I replaced the PNGs with H1 (for instance) the thin black border persists. So I'm guessing it has to do with the jQuery as opposed to a PNG hack and how IE interprets curves/transparency. See the blocky black button doesn't have this ragged border.

Forgive me if I'm not giving the group all necessary information to help me troubleshoot. If anyone wanted to rip apart the code and tell me what a noob I am, I'd too appreciate the constructive criticism. Thanks so much, all.
// Establish/reset CSS for each frame's internal pieces such as headline, button, etc. in terms of position and opacity
function frameCSS() {
	$("div#consultantsContent img.headline").css({top:"60px",left:"30px",opacity:"0"});
	$("div#consultantsContent img.button").css({top:"160px",left:"10px",opacity:"0"});
// Define each frame's unique animations
function doRotate(whichSection) {
	// Stall animations
	$("div#consultantsContent img.headline").animate({opacity:"0"}, 500);
	$("div#consultantsContent img.button").animate({top:"160px",left:"10px",opacity:"0"}, 2500);
	// Execute animations
	$("div#consultantsContent img.headline").animate({opacity:"1"}, 1200);
	$("div#consultantsContent img.button").animate({top:"160px",left:"30px",opacity:"1"}, 800);

Open in new window

  • 3
1 Solution
can you provide a url with a working example of the issue?
Thanks so much for having a look!

username: experts
password: advicefromexperts
yeah - IE + pngs + opacity = the suck unfortunately.

If you were simply doing a fade, you could use the fadeIn and fadeOut effects which show the nasty during the animation, but remove it at the end. But, since you are animating both position and opacity - I don't know what to tell ya... sorry :(
since the images are appearing over a fairly solid and consistent background, I'll bet that if you used transparent gifs with a carefully selected matte color, you might be able to acheive the same effect without too much loss in aesthetics.
rspalmer33Author Commented:
Yeah, I've been at it all week. It looks like that's the best solution. Thanks for confirming for me there aren't too many other options.

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now