title: How can I achieve this Flash effect using jQuery?
body: <p><strong>UPDATE:</strong> The effects work fine. <strong>The last thing that remains is trying to slide trough the divs whic I can't seem to be able to <a href="http://www.sopranowebdesign.com/animation/" rel="nofollow">figure out</a>.</strong></p>
  
  <hr>
  
  <p><strong>UPDATE:</strong> I've managed to do it with the <a href="http://ricostacruz.com/jquery.transit/" rel="nofollow">transitions plugin</a>. One problem remains: when text slides in the box I can see how it enters the box from outside. <a href="http://www.sopranowebdesign.com/animation/" rel="nofollow">Click here</a> to see what I mean.</p>
  
  <hr>
  
  <p>I'd like to achieve <a href="http://www.sopranowebdesign.com/animation/" rel="nofollow">this flash effect</a> using jQuery (top -> flash, bottom -> jquery) so it would be viewable on iphones and smartphones.</p>
  
  <p>At the moment, I can't get the text to slide in from underneath those boxes.</p>
  
  <p><strong>HTML code:</strong></p>
  
  <pre><code>&lt;div id="banner"&gt;
      &lt;div&gt;
          &lt;img src="img/banner-1.jpg" class="banner-bg" /&gt;
          &lt;div class="left"&gt;&lt;/div&gt;
          &lt;div class="left-text"&gt;&lt;span&gt;POLISHED FLOORS1&lt;/span&gt;&lt;/div&gt;
          &lt;div class="right"&gt;&lt;/div&gt;   
          &lt;div class="right-text"&gt;&lt;span&gt;Custom-made, elegant and long lasting.&lt;/span&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;div&gt;
          &lt;img src="img/banner-2.jpg" class="banner-bg" /&gt;
          &lt;div class="left"&gt;&lt;/div&gt;
          &lt;div class="left-text"&gt;&lt;span&gt;POLISHED FLOORS2&lt;/span&gt;&lt;/div&gt;
          &lt;div class="right"&gt;&lt;/div&gt;   
          &lt;div class="right-text"&gt;&lt;span&gt;Custom-made, elegant and long lasting.&lt;/span&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;div&gt;
          &lt;img src="img/banner-3.jpg" class="banner-bg" /&gt;
          &lt;div class="left"&gt;&lt;/div&gt;
          &lt;div class="left-text"&gt;&lt;span&gt;POLISHED FLOORS3&lt;/span&gt;&lt;/div&gt;
          &lt;div class="right"&gt;&lt;/div&gt;   
          &lt;div class="right-text"&gt;&lt;span&gt;Custom-made, elegant and long lasting.&lt;/span&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>jQuery code:</strong></p>
  
  <pre><code>$(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);
      });
  });  
  </code></pre>
  
  <p><strong>CSS code:</strong></p>
  
  <pre><code>#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;
  }
  </code></pre>
  
  <p>Any suggestions?</p>