Rollhover graduales con efectos de opacidad sobre PNG 24 transparentes

Hola a todos.

Quiero hacer roll-hovers progresivos (animados) con efectos de opacidad sobre imágenes.

He hecho una función Javascipt que tira de Jquery:

. JavaScript

Código Javascript :

$(function(){      
      $('#container img').hover(function(){
         $(this).stop().animate({"opacity":.5}, 300);
      }, function(){
         $(this).stop().animate({"opacity":1}, 100);
      });   
   });

. HTML

Código HTML :

<div id="container"">
      <a href="#"><img src="img_transp.png" border="0" /></a>
      <a href="#"><img src="img_transp.png" border="0" /></a>
      <a href="#"><img src="img_transp.png" border="0"/></a>
      <a href="#"><img src="img_transp.png" border="0" /></a>
</div>

Dejo un link con prueba: TEST

Funciona my bien, pero cuando uso png24 transparentes me da problemas en todos los IE...
Lo que es semi-transparente sale negro.
Va perfectamente en firefox y chrome.

No me sirven png8 ni gif transparentes.

Me doy cuenta que esto pasa con todas las versiones de IE.
También afecta fadeIn y FadeOut...
Si hay un PNg24 contrasnperencias metido en cualquier animación de opacidad gradual se ve ensuciado con negro...

Aver si me podéis hechar una mano.
Muchas gracias !

No encuentro ninguna solución...
Por favor si alguien me podría ayudar le estaría muy agradecido...

IE6 no soporta PNGs con transparencia en 24/32bit.
IE7 y mayores SI soportan la transparencia.

Podrias hacer que en IE6 uses una imagen distinta, o uses el filtro para que funcione en IE6.
http://www.cristalab.com/tutoriales/png-con-transparencia-alpha-png32-en-internet-explorer-c21618l/

Btw, cool que si uses .stop() para detener la animacion, no muchos la usan correctamente

Gracias NEO_JP por tu respuesta.
Pero IE6 me da un poco igual, hace tiempo ya que he dejado la auto-lapidación
Me interesa más que funcione en IE7&8. ¿Algun script o idea?
Gracias por del .stop() ,no he inventado nada, solo me lo he fusilado de un tutorial.

Los png deberian funcionar en IE7, 8 y 9. Si se ve negro, quizas sea xq es una imagen con opacidad, intenta poniendolo como imagenes de fondo + opacidad.

Si no es ninguna de las 2, quizas no se que pueda ser.

Gracias NEO_JP por echarme una mano...

Ya se que los PNGs trans funcionan bien en IE 7-8-9.
El problema es cuando se les aplica animación por Jscript (opacity, fade in, show, etc.).
La parte con opacidad se ve muy ensuciada con una macha negra que saldrá del bolsillo de david blaine.
Mira esto (con IE claro): TEST

Luego hice lo que me indicastes: meter la imagen de background:

Código HTML :

<div id="container">
<a href="#" style="background:url(img-trans.png) no-repeat; width:132px; height:132px; float:left"></a>
</div>

y luego de aplicar la función al "a" en vez de a "img":

Código Javascript :

<script type="text/javascript">
   $(function(){      
      $('#container a').hover(function(){
         $(this).stop().animate({"opacity":.5}, 300);
      }, function(){
         $(this).stop().animate({"opacity":1}, 100);
      });   
   });
</script>

Pero sigue haciendo exactamente la misma guarrada....
IE como siempre: jodiendo, para variar...

Ok, intentare darte una mano luego, eso de revisar cosas en IE toma tiempo. Si es solo ver codigo, es rapido. Te respondo luego.