¿Cómo puedo lograr este efecto Flash usando jQuery?

Question

ACTUALIZACIÓN: Los efectos funcionan bien. Lo último que queda es intentar deslizarme a través de los divs que parece que no puedo figure out.

---

ACTUALIZACIÓN: he conseguido hacerlo con la transitions plugin. Queda un problema: cuando el texto se desliza en el cuadro, puedo ver cómo entra desde el exterior. Click here para ver lo que quiero decir.

---

me gustaría lograr this flash effect usando jQuery (arriba -> flash, inferior -> jQuery) por lo que sería visible en iPhones y teléfonos inteligentes.

Por el momento, no puedo obtener el texto para deslizar desde debajo de esos cuadros.

código HTML: código

<div id="banner"> 
    <div> 
     <img src="img/banner-1.jpg" class="banner-bg" /> 
     <div class="left"></div> 
     <div class="left-text"><span>POLISHED FLOORS1</span></div> 
     <div class="right"></div> 
     <div class="right-text"><span>Custom-made, elegant and long lasting.</span></div> 
    </div> 
    <div> 
     <img src="img/banner-2.jpg" class="banner-bg" /> 
     <div class="left"></div> 
     <div class="left-text"><span>POLISHED FLOORS2</span></div> 
     <div class="right"></div> 
     <div class="right-text"><span>Custom-made, elegant and long lasting.</span></div> 
    </div> 
    <div> 
     <img src="img/banner-3.jpg" class="banner-bg" /> 
     <div class="left"></div> 
     <div class="left-text"><span>POLISHED FLOORS3</span></div> 
     <div class="right"></div> 
     <div class="right-text"><span>Custom-made, elegant and long lasting.</span></div> 
    </div> 
</div> 

jQuery: Código

$(document).ready(function(){ 
    //$("#banner .left").transition({opacity: "1", width: "238px"}, 1200); 
    //$("#banner .right").transition({opacity: "0.7", width: "662px"}, 1200); 
    //$("#banner .left-text").delay(1200).transition({ opacity: '1', x: '-220px' }); 
    //$("#banner .right-text").delay(1200).transition({ opacity: '1', x: '+642px' }); 

    $(function(){ 
     $ds = $('#banner div .banner-bg'); 
     $ds.hide().eq(0).show(); 
     setInterval(function(){ 
       $ds.filter(':visible').fadeOut(function(){ 
         var $banner_bg = $(this).next('div .banner-bg'); 
         var $left = $(this).next('div .left'); 
         var $right = $(this).next('div .right'); 
         var $left_text = $(this).next('div .left-text'); 
         var $right_text = $(this).next('div .right-text'); 
         if ($banner_bg.length == 0) { 
          $ds.eq(0).fadeIn(); 
         } else { 
          $left.transition({opacity: "1", width: "238px"}, 1200); 
          $right.transition({opacity: "0.7", width: "662px"}, 1200); 
          $left_text.delay(1200).transition({ opacity: '1', x: '-220px' }); 
          $right_text.delay(1200).transition({ opacity: '1', x: '+642px' }); 
          $banner_bg.fadeIn(); 
         } 
       }); 
     }, 5000); 
    }); 
}); 

CSS:

#banner { 
    height:299px; 
    width:900px; 
    position:relative; 
    overflow:hidden; 
} 
#banner .banner-bg { 
    z-index:0; 
    position:absolute; 
    top:0; 
    left:0; 
} 
#banner .left { 
    float:left; 
    width:0px; 
    height:100px; 
    background:url(img/banner-left-bg.png); 
    opacity:0.3; 
    position:relative; 
    z-index:7; 
} 
#banner .right { 
    float:right; 
    width:0px; 
    height:100px; 
    background-color:#34515c; 
    opacity:0.3; 
    position:relative; 
    z-index:5; 
} 
#banner .left-text, #banner .right-text { 
    font-family:Verdana, Arial; 
    font-size:22px; 
    font-style:normal; 
    color:#fff; 
    top:35px; 
} 
#banner .left-text { 
    position:absolute; 
    left:233px; 
    opacity:0; 
    z-index:8; 
} 
#banner .right-text { 
    position:absolute; 
    right:662px; 
    width:630px;; 
    font-size:24px; 
    opacity:0; 
    z-index:6; 
} 

Cualquier sugerencia ?

Answer 1

Creé un jsFiddle de su marcado en línea.

La solución es tener un valor de z-index para el bloque izquierdo de texto, es decir, .left y .left-text para que cubra la animación entrante.

EDIT: Para su 2da actualización enumerada en su pregunta, veo su HTML en línea y jQuery en línea es un método totalmente diferente de lo que usted ha enumerado aquí. Veo a dónde te diriges con esto pero falta mucho en tu marcado en todas partes, pero estás en el camino correcto.

Sugeriría utilizar uno de los muchos complementos de presentación de diapositivas gratuitos que se pueden combinar con su texto único de banner que tiene animación. Eche un vistazo al s3Slider DEMO aquí. Esos cuadros de texto de banner se pueden cambiar por su propia versión pulida en su lugar. La página de inicio s3Slider es HERE.

ESTADO: Por último, un jsFiddle que recrea el efecto de destello utilizando un plugin sQ3Sider s3Slider altamente modificado que también valida el uso de jsLint. Tengo muchos comentarios en esa demostración.

LINK:     jsFiddle DEMO (Actualizado 12/26/2012)

Para inspiración, aquí están algunas webkit examples del anuncio de CSS3 vs flash anuncio de que tienen el mismo aspecto. Adivina cual!

Answer 2

Suena como #banner necesita overflow: hidden;.