title: Text animation over slide show using "cycle-after" for cycle2
body: <p>I'm trying to make text <code>slide</code> or <code>fade in</code> from being hidden after the slideshow has completed transitioning to the next slide. An example is the slideshow on <a href="http://littleboogaweezin.com/" rel="nofollow">this website</a>.</p>
  
  <p>I am trying to do this using the "cycle-after" event the <code>cycle-2</code> <a href="http://jquery.malsup.com/cycle2/api/" rel="nofollow">API has specified</a>, however I am not well-versed in jQuery and I am not sure of what event handler code to place within the event to achieve this effect, i.e.:</p>
  
  <pre><code>$( '#mySlideshow' ).on( 'cycle-after', function(event, optionHash, outgoingSlideEl, incomingSlideEl, forwardFlag) {
      // I'm not sure what to put here to make this effect//
  });
  </code></pre>
  
  <p>I know I need to make divs with the text and plug them into the jQuery, I just don't know the correct code to achieve that effect.</p>
  
  <p>Also, I want the text to look similar to that of the website I have previously mentioned, which is why I am not using the overlay feature in <code>cycle2</code>.</p>
  
  <p>Here is my code so far: </p>
  
  <p><strong>HTML:</strong>
      
      
      </p>
  
  <pre><code>&lt;script type id="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2    /jquery.min.js"&gt;&lt;/script&gt;
  
  &lt;script type id="text/javascript" src="https://malsup.github.io/min/jquery.cycle2.min.js"&gt;&lt;/script&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div id="container"&gt;
  &lt;div class="cycle-slideshow"
  data-cycle-fx=scrollHorz
  data-cycle-timeout=4000
  data-cycle-slides="&gt; a"
  data-cycle-pause-on-hover="true"
   &gt;
  
  &lt;div class="cycle-prev"&gt;&lt;/div&gt;
  &lt;div class="cycle-next"&gt;&lt;/div&gt;
  
  &lt;a href=""&gt;
  &lt;img src="http://i1255.photobucket.com/albums/hh628/prestonhitzler/moss1resize_zps6b660b8e.jpg" /&gt;
  &lt;/a&gt;
  
  &lt;a href=""&gt;
  &lt;img src="http://i1255.photobucket.com/albums/hh628/prestonhitzler/moss2resize_zps2fb527e4.jpg" /&gt;
  &lt;/a&gt;
  
  &lt;a href=""&gt;
  &lt;img src="http://i1255.photobucket.com/albums/hh628/prestonhitzler/moss3resize_zpsffdcdbd2.jpg" /&gt;
  &lt;/a&gt;
  
  &lt;a href=""&gt;
  
  &lt;img src="http://i1255.photobucket.com/albums/hh628/prestonhitzler/moss4resize_zps8d09372f.jpg" /&gt;
  &lt;/a&gt; 
  
  &lt;a href=""&gt;
  &lt;img src="http://i1255.photobucket.com/albums/hh628/prestonhitzler/moss5resize_zpscb87b4ed.jpg" /&gt;
  &lt;/a&gt;
  
  &lt;/div&gt;&lt;!-- slideshow --&gt;
  &lt;/div&gt;&lt;!-- container --&gt;
  
  
  &lt;/body&gt;
  </code></pre>
  
  <p><strong>CSS:</strong> </p>
  
  <pre><code>&lt;style type="text/css"&gt;
  
  .cycle-slideshow, .cycle-slideshow * {
  -webkit-box-sizing: border-box; 
  -moz-box-sizing: border-box;
  box-sizing: border-box;  
  }
  .cycle-slideshow {
    width: 100%;
    min-width: 320px;
    max-width: 960px;
    margin: 10px auto;
    padding: 0;
    position: relative;
    background: url(http://malsup.github.com/images/spinner.gif) 50% 50% no-repeat;
  }
  .cycle-slideshow img:first-child {
      position: static; 
      z-index: 100;
  }
  .cycle-slideshow img { 
      position: absolute; 
      top: 0; 
      left: 0;
      width: 100%; 
      padding: 0; 
      display: block;
  }
  .cycle-slideshow a{
      display: block;
      width: 100%;
  }
  
  .cycle-prev, .cycle-next { 
  position: absolute; 
  top: 35%; 
  width: 6.68%;
  height: 23%;
  opacity: 0.3;
  z-index: 800; 
  cursor: pointer;
  -webkit-box-sizing: border-box; 
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  }
  .cycle-prev{
    background: url('http://i1255.photobucket.com/albums/hh628/prestonhitzler/Arrow- Back1_zps9f5ab580.png') 50% 50% no-repeat;
    left: 0;
    background-size: 100%;
  }
  .cycle-next{
  background: url('http://i1255.photobucket.com/albums/hh628/prestonhitzler/Arrows-       Forward1_zps598390d7.png') 50% 50% no-repeat;
    right: 0;
    background-size: 100%;
  }
  
  .cycle-prev:hover, .cycle-next:hover {
    opacity: 0.5;
  }
   &lt;/style&gt;
  &lt;/html&gt;
  </code></pre>