Jquery slider animation - Small text animation customization
<p>I came across this great jquery image slider with text animation (<a href="http://tympanus.net/codrops/2011/11/21/elastic-image-slideshow-with-thumbnail-preview/" rel="nofollow">link</a>), but I need some customization to the fly-in text, more specifically the one slide's H3 tag.</p>

<p>Here is my code and here is my webpage where I implemented it: <a href="http://lamininbeauty.co.za/index2.html" rel="nofollow">myPage</a></p>

<p>HTML:</p>

<pre><code>&lt;div class="container"&gt;           
         &lt;div class="clr"&gt;&lt;/div&gt;
            &lt;div class="wrapper"&gt;
                &lt;div id="ei-slider" class="ei-slider"&gt;
                    &lt;ul class="ei-slider-large"&gt;
                        &lt;li&gt;
                            &lt;img src="images/large/6.jpg" alt="image06"/&gt;
                            &lt;div class="ei-title"&gt;
                                &lt;h2&gt;Vertical Sunbed&lt;/h2&gt;
                                &lt;h3&gt;(TanCan)&lt;/h3&gt;
                            &lt;/div&gt;
                        &lt;/li&gt;
                        &lt;li&gt;
                            &lt;img src="images/large/1.jpg" alt="image01" /&gt;
                            &lt;div class="ei-title"&gt;
                                &lt;h2&gt;Koebana Spray Tan&lt;/h2&gt;
                                &lt;h3&gt;(Portable)&lt;/h3&gt;
                            &lt;/div&gt;
                        &lt;/li&gt;
                        &lt;li&gt;
                            &lt;img src="images/large/2.jpg" alt="image02" /&gt;
                            &lt;div class="ei-title"&gt;
                                &lt;h2&gt;Ozone Sauna&lt;/h2&gt;
                                &lt;h3&gt;(Portable)&lt;/h3&gt;
                            &lt;/div&gt;
                        &lt;/li&gt;
                        &lt;li&gt;
                            &lt;img src="images/large/3.jpg" alt="image03"/&gt;
                            &lt;div class="ei-title"&gt;
                                &lt;h2&gt;Glycopeels&lt;/h2&gt;
                                &lt;h3&gt;(Filorga)&lt;/h3&gt;
                            &lt;/div&gt;
                        &lt;/li&gt;
                        &lt;li&gt;
                            &lt;img src="images/large/4.jpg" alt="image04"/&gt;
                            &lt;div class="ei-title"&gt;
                                &lt;h2&gt;Specialised Facials&lt;/h2&gt;
                                &lt;h3&gt;(Filorga)&lt;/h3&gt;
                            &lt;/div&gt;
                        &lt;/li&gt;
                        &lt;li&gt;
                            &lt;img src="images/large/5.jpg" alt="image05"/&gt;
                            &lt;div class="ei-title custom"&gt;
                                &lt;h2&gt;Make Up&lt;/h2&gt;
******NOTE Below is the three h3 tags I want to customize******
                                &lt;h3&gt;Bridal&lt;/h3&gt;
                                &lt;h3&gt;Matron of Honor&lt;/h3&gt;
                                &lt;h3&gt;Matric Farewell&lt;/h3&gt;
                            &lt;/div&gt;
                        &lt;/li&gt;
                        &lt;li&gt;
                            &lt;img src="images/large/7.jpg" alt="image07"/&gt;
                            &lt;div class="ei-title"&gt;
                                &lt;h2&gt;Crazy&lt;/h2&gt;
                                &lt;h3&gt;Friend&lt;/h3&gt;
                            &lt;/div&gt;
                        &lt;/li&gt;
                    &lt;/ul&gt;&lt;!-- ei-slider-large --&gt;
                    &lt;ul class="ei-slider-thumbs"&gt;
                        &lt;li class="ei-slider-element"&gt;Current&lt;/li&gt;
                        &lt;li&gt;&lt;a href="#"&gt;Slide 6&lt;/a&gt;&lt;img src="images/thumbs/6.jpg" alt="thumb06" /&gt;&lt;/li&gt;
                        &lt;li&gt;&lt;a href="#"&gt;Slide 1&lt;/a&gt;&lt;img src="images/thumbs/1.jpg" alt="thumb01" /&gt;&lt;/li&gt;
                        &lt;li&gt;&lt;a href="#"&gt;Slide 2&lt;/a&gt;&lt;img src="images/thumbs/2.jpg" alt="thumb02" /&gt;&lt;/li&gt;
                        &lt;li&gt;&lt;a href="#"&gt;Slide 3&lt;/a&gt;&lt;img src="images/thumbs/3.jpg" alt="thumb03" /&gt;&lt;/li&gt;
                        &lt;li&gt;&lt;a href="#"&gt;Slide 4&lt;/a&gt;&lt;img src="images/thumbs/4.jpg" alt="thumb04" /&gt;&lt;/li&gt;
                        &lt;li&gt;&lt;a href="#"&gt;Slide 5&lt;/a&gt;&lt;img src="images/thumbs/5.jpg" alt="thumb05" /&gt;&lt;/li&gt;
                        &lt;li&gt;&lt;a href="#"&gt;Slide 7&lt;/a&gt;&lt;img src="images/thumbs/7.jpg" alt="thumb07" /&gt;&lt;/li&gt;
                    &lt;/ul&gt;&lt;!-- ei-slider-thumbs --&gt;
                &lt;/div&gt;&lt;!-- ei-slider --&gt;
            &lt;/div&gt;&lt;!-- wrapper --&gt;
        &lt;/div&gt;
</code></pre>

<p>The h3 tags I want to customize: Basically, I want them each to slide in individually, not all at once:</p>

<pre><code>&lt;li&gt;
  &lt;img src="images/large/5.jpg" alt="image05"/&gt;
  &lt;div class="ei-title custom"&gt;
  &lt;h2&gt;Make Up&lt;/h2&gt;
  &lt;h3&gt;Bridal&lt;/h3&gt;  &lt;-- This one
  &lt;h3&gt;Matron of Honor&lt;/h3&gt;  &lt;-- and this one
  &lt;h3&gt;Matric Farewell&lt;/h3&gt;  &lt;--and this one
  &lt;/div&gt;
&lt;/li&gt;   
</code></pre>

<p>Here is the part of the js file that does the Text Animation:</p>

<pre><code>$nextSlide.find('div.ei-title &gt; h2')
                      .css( 'margin-right', 50 + 'px' )
                      .stop()
                      .delay( this.options.speed * this.options.titlesFactor )
                      .animate({ marginRight : 0 + 'px', opacity : 1 }, this.options.titlespeed, this.options.titleeasing )
                      .end()
                      .find('div.ei-title &gt; h3')
                      .css( 'margin-right', -50 + 'px' )
                      .stop()
                      .delay( this.options.speed * this.options.titlesFactor )
                      .animate({ marginRight : 0 + 'px', opacity : 1 }, this.options.titlespeed, this.options.titleeasing ) 
</code></pre>

<p>MY APPROACH:</p>

<p>Basically what I had in mind, is changing those 3 h3 tags to span tags, and aad that as individual animations in the js file:</p>

<p>the HTML:</p>

<pre><code>&lt;div class="ei-title"&gt;
            &lt;h2&gt;Make Up&lt;/h2&gt;
            &lt;span class="custom1"&gt;Bridal&lt;/span&gt;
            &lt;span class="custom2"&gt;Matron of Honor&lt;/span&gt;
            &lt;span class="custom3"&gt;Matric Farewell&lt;/span&gt;
&lt;/div&gt;
</code></pre>

<p>the JS: only the added js to the original specified at the top here</p>

<pre><code>.find('div.ei-title .custom1')
                      .css( 'margin-right', -50 + 'px' )
                      .stop()
                      .delay( this.options.speed * this.options.titlesFactor )
                      .animate({ marginRight : 0 + 'px', opacity : 1 }, this.options.titlespeed, this.options.titleeasing )
                      .find('div.ei-title .custom2')
                      .css( 'margin-right', -50 + 'px' )
                      .stop()
                      .delay( this.options.speed * this.options.titlesFactor )
                      .animate({ marginRight : 0 + 'px', opacity : 1 }, this.options.titlespeed, this.options.titleeasing )
                      .find('div.ei-title .custom3')
                      .css( 'margin-right', -50 + 'px' )
                      .stop()
                      .delay( this.options.speed * this.options.titlesFactor )
                      .animate({ marginRight : 0 + 'px', opacity : 1 }, this.options.titlespeed, this.options.titleeasing )
</code></pre>

<p>But I cannot get it to work.</p>

<p>Any suggestions?</p>

<p>Thank you!</p>
