title: jQuery cycle for text animation on a slideshow
body: <p>I'm trying to find a way to animate the image title and caption for each slide of a slideshow and sync their animation effects with the ones of the slideshow. i.e. as soon as the slide transition effect has ended, the title goes from right to left and the caption from top to bottom, and when the slide transition effect kicks in, the whole text would fade out at the same time the slide fades out, and let the new slide and text fade in.</p>
  
  <p>I figured out how to make my image title and caption move using .animate ( <a href="http://jsfiddle.net/S8F9Y/" rel="nofollow">http://jsfiddle.net/S8F9Y/</a> ) :</p>
  
  <pre><code>var $j = jQuery.noConflict();
  
  
  $j(document).ready(function() {
  
      // Get the slideshow options
      var $slidespeed      = parseInt( meteorslidessettings.meteorslideshowspeed );
      var $slidetimeout    = parseInt( meteorslidessettings.meteorslideshowduration );
      var $slideheight     = parseInt( meteorslidessettings.meteorslideshowheight );
      var $slidewidth      = parseInt( meteorslidessettings.meteorslideshowwidth );
      var $slidetransition = meteorslidessettings.meteorslideshowtransition;
      var $captionduration = $slidetimeout - ($slidespeed*2);
  
      $j('.meteor-slides h1').delay($slidespeed).animate({left: '30',opacity: 1}, 600, function(){/*Animation complete.*/});
      $j('.meteor-slides p').delay($slidespeed + 200).animate({top: '70',opacity: 1}, 600, function(){/*Animation complete.*/});
      $j('.meteor-slides h1').delay($captionduration).animate({opacity: 0}, $slidespeed, function(){/*Animation complete.*/});
      $j('.meteor-slides p').delay($captionduration - 200).animate({opacity: 0}, $slidespeed, function(){/*Animation complete.*/});
  
  
      // Setup jQuery Cycle
      $j('.meteor-slides').cycle({
          cleartypeNoBg: true,
          fit:           1,
          fx:            $slidetransition,
          height:        $slideheight,
          next:          '#meteor-next',
          pager:         '#meteor-buttons',
          pagerEvent:    'click',
          pause:         1,
          prev:          '#meteor-prev',
          slideExpr:     '.mslide',
          speed:         $slidespeed,
          timeout:       $slidetimeout,
          width:         $slidewidth
      });
  
      // Setup jQuery TouchWipe
      $j('.meteor-slides').touchwipe({
          wipeLeft: function() {
              $j('.meteor-slides').cycle('next');
          },
          wipeRight: function() {
              $j('.meteor-slides').cycle('prev');
          },
          preventDefaultEvents: false
      });
  
      // Add class to hide and show prev/next nav on hover
      $j('.meteor-slides').hover(function () {
          $j(this).addClass('navhover');
      }, function () {
          $j(this).removeClass('navhover');
      });
  
      // Set a fixed height for prev/next nav in IE6
      if(typeof document.body.style.maxWidth === 'undefined') {
          $j('.meteor-nav a').height($slideheight);
      }
  
      // Add align class if set in metadata
      $j('.meteor-slides').each(function () {
          meteormetadata = $j(this).metadata();
          if (meteormetadata.align == 'left') {
              $j(this).addClass('meteor-left');
          } else if (meteormetadata.align == 'right') {
              $j(this).addClass('meteor-right');
          } else if (meteormetadata.align == 'center') {
              $j(this).addClass('meteor-center');
          }
      });
  
  });
  </code></pre>
  
  <ul>
  <li>The 1st problem is that there's no cycle so the text animation only
  plays once,</li>
  <li>the 2nd problem is that text effects are not in sync with slide effects,</li>
  <li>the 3rd problem is that there's no slide transition for the first slide so if this is the first slide, the text animation should start right away for h1 and +200ms for p, with no additional delay ($slidespeed).</li>
  </ul>
  
  <p>Thanks in advance,
  Kim</p>