Ver Mensaje Individual
  #6 (permalink)  
Antiguo 24/05/2011, 04:10
chemon
 
Fecha de Ingreso: agosto-2004
Mensajes: 312
Antigüedad: 19 años, 8 meses
Puntos: 0
Respuesta: Animar capas que contienen flash

Gracias por la ayuda a todos
Por motivos de plazos tengo que dejar pendiente la cuestión, así que lo voy a limitar a archivos de imagen.
Adjunto el código aunque lo que hice fue sacarlo de un tutorial de jquery
Código Javascript:
Ver original
  1. $(document).ready(function(){
  2.     spacing = 253; //Espacio ancho que ocupan las miniaturas
  3.     minis   = 1; //Numero de miniaturas que aparecen
  4.     dist_esconder = -1000; //donde colocamos la miniatura cuando esta escondida. Puede ser necesario cambiarla
  5.    
  6.     $('#featured').css({
  7.         //'width': spacing * minis,
  8.         'width': '190px',
  9.         'height': '253px',
  10.         'overflow': 'hidden'
  11.     }).find('.covers a').css({
  12.         'position': 'absolute',
  13.         'top': dist_esconder,
  14.         'left': 0
  15.     });
  16.  
  17.     var setUpCovers = function(){
  18.         var $covers = $('#featured .covers a');
  19.        
  20.         for (c = 0; c < minis; c++){
  21.             $covers.eq(c).css('top', spacing * c);
  22.         }
  23.     };
  24.  
  25.     setUpCovers();
  26.    
  27.     repeticion = setTimeout(top, 3000);
  28. });
  29.  
  30. function top(){
  31.     //var spacing = 220;
  32.     var $covers = $('#featured .covers a');
  33.    
  34.     for (c = 0; c < (minis) ; c++){
  35.         $covers.eq(c).animate({'top': spacing * (c + 1)}, 'fast'); 
  36.     }
  37.     $covers.eq($covers.length - 1)
  38.         .css('top', -spacing)
  39.         .animate({'top': 0}, 'fast', function(){
  40.             $(this).prependTo('#featured .covers');
  41.                                                }); 
  42.     clearTimeout(repeticion);
  43.     repeticion = setTimeout(top, 3000);
  44. }

El css de partida es el siguiente
Código CSS:
Ver original
  1. #featured{  position: relative; width: 210px;height: auto; overflow: scroll; margin:0; padding: 5; text-align: center; background-color:#ccccCC }
  2.         #featured .covers{ heigth:auto;}

Y por último el código html
Código HTML:
Ver original
  1. <div id="featured">
  2.                 <div class="covers" onmouseover="clearTimeout(repeticion);" onmouseout="repeticion = setTimeout(left, 3000);">
  3.                     <a href="#"><img src="Forest.jpg" border="0" /></a>
  4.                     <a href="#"><img src="Humpback-Whale.jpg" border="0" /></a>
  5.                     <a href="#"><img src="Tree.jpg" border="0" /></a>                                        
  6.                </div>
  7.              </div>

Cuando en el ancla introduzco un swf en lugar de una imagen no me realiza la animación.

Por tema de cumplir plazos con el cliente lo voy a limitar de momento a imágenes que funciona correctamente, pero no descarto implementarlo más adelante. Puede que tarde en contestar por lo liado que voy

De nuevo gracias a todos por el interés