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: http://65.122.176.31/justin/buttons/

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);
      }
    );