Código :

Buenas Tardes 

Espero que alguien me pueda ayudar

El problema que tengo es el siguiente, al colocar este tipo de Banner con Jquery, tengo un problema con la transicion de la imagenes, en internet Explores funciona bien la transicion Fade pero en Mozilla y Chrome no funciona.

Les dejo el codigo y un demo por si a alguien le ha pasado algo similar.

Saludos,


Código Javascript :


<script type="text/javascript" language="javascript">
jQuery(function() {
   //Cambiar ID (#animacion-banners) por el nombre del ID que le asignemos a la animacion
   jQuery('#animacion-banners').carouFredSel({
      width: 860, //Medida de Ancho de la Imagen
      height: '246', //Medida de Alto de la Imagen
      scroll: {
         items: 1,
         fx: "crossfade" //Tipo de transicion
      },
      align: "false",
      items: {
         start: "random" //Banners Random cada ves que se carga el sitio
      },
      auto: {
         play         : true, //AutoPlay de los Banner
         pauseDuration   : 5000 //Segundos de Pausa (1000 = 1 segundo)
      }
   });
});
</script>



Código HTML :


<form id="form1" runat="server">
   <div id="cuadro-banners">
      <!-- Aqui asigamos el nombre del ID que necesitamos para para aplicarlo a la programacion -->
      <div id="animacion-banners" class="banner-animacion">
         <div class="banners">
            <img alt="" height="246" src="images/banner%20(1).jpg" width="860" style="border-width: 0px"/>
         </div>
         <div class="banners">
            <img alt="" height="246" src="images/banner%20(2).jpg" width="860" style="border-width: 0px"/>
         </div>
         <div class="banners">
            <img alt="" height="246" src="images/banner%20(3).jpg" width="860" style="border-width: 0px"/>
         </div>
         <div class="banners">
            <img alt="" height="246" src="images/banner%20(4).jpg" width="860" style="border-width: 0px"/>
         </div>
         <div class="banners">
            <img alt="" height="246" src="images/banner%20(5).jpg" width="860" style="border-width: 0px"/>
         </div>
         <div class="banners">
            <img alt="" height="246" src="images/banner%20(6).jpg" width="860" style="border-width: 0px"/>
         </div>
      </div>
   </div>   
</form>




Código :


#cuadro-banners {
   height: 246px;
   width: 860px;
}
#cuadro-banners .banner-animacion {
   overflow: hidden;
   height: 246px;
   width: 860px;
}
#cuadro-banners .banner-animacion .banners {
   width: 860px;
   height: 246px;
   float: left;
}