JQuery :: Transparent PNG Shows Black Edges In IE8

I created a button with 2 states for mouse-over effects using css sprites. This has always worked well and I have no issues. I recently added some jquery to my buttons to create a smooth transition for the mouse over and this is where I see the issue. When the page is initially loaded the image looks fine. When I hover over the image there is a brief flash of black around the transparent edges then the transition begins and everything looks okay. When I un-hover the image shows the black edges. From this point any time the image is in the un-hovered state the edges are black, and when I hover the black goes away.
Example: [URL]

Here is the jquery code:
$('p.rss-button a')
.css({ 'backgroundPosition': '0 0' })
.hover(
function(){
$(this)
.stop()
.animate({
'opacity': 0
}, 325);
}, function(){
$(this)
.stop()
.animate({
'opacity': 1
}, 325);
});