Jquery slider animation - Small text animation customization
===

I came across this great jquery image slider with text animation ([link][1]), but I need some customization to the fly-in text, more specifically the one slide's H3 tag.

Here is my code and here is my webpage where I implemented it: [myPage][2]

HTML:

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

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

 

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

Here is the part of the js file that does the Text Animation:

    $nextSlide.find('div.ei-title > 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 > 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 ) 


MY APPROACH:

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:

the HTML:

 

    <div class="ei-title">
                <h2>Make Up</h2>
                <span class="custom1">Bridal</span>
                <span class="custom2">Matron of Honor</span>
                <span class="custom3">Matric Farewell</span>
    </div>

the JS: only the added js to the original specified at the top here

    .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 )

But I cannot get it to work.

Any suggestions?

Thank you!

  [1]: http://tympanus.net/codrops/2011/11/21/elastic-image-slideshow-with-thumbnail-preview/
  [2]: http://lamininbeauty.co.za/index2.html