Black border on jQuery animations in IE 6-8

Posted on 2009-05-01
Last Modified: 2013-12-08
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

Question by:rspalmer33
    LVL 12

    Expert Comment

    can you provide a url with a working example of the issue?

    Expert Comment

    Thanks so much for having a look!
    username: experts
    password: advicefromexperts
    LVL 12

    Expert Comment

    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 :(
    LVL 12

    Accepted Solution

    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.

    Author Closing Comment

    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

    How to run any project with ease

    Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
    - Combine task lists, docs, spreadsheets, and chat in one
    - View and edit from mobile/offline
    - Cut down on emails

    Join & Write a Comment

    I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
    Several part series to implement Internet Explorer 11 Enterprise Mode
    In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
    In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…

    745 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    20 Experts available now in Live!

    Get 1:1 Help Now