Box Slider callbacks beforeSlide and afterSlide

Box Slider callbacks beforeSlide and afterSlide

I have the box slider plugin working as it should, but now I'd like to make it a bit more fancy and make use of the callbacks with animation etc... But I just don't understand how it works using the options.

so my markup for each list item looks like this.

  1. <li>  
  2.       <div class="text">
  3.             <h2>Heading</h2>
  4.             <p>A short description of the slider</p>
  5.       </div>
  6.       <img src="some/image/path.jpg" alt="image description" title="image title"/>
  7. </li>

I want to animate the text out before the next slide comes along.

So my idea of it is that I need to write a function, similar to this...

  1. function slideTextOut() {
  2.       var current = slider.getCurrentSlide();
  3.             $('ul.bxslider li:eq('+current+') div.text').animate({opacity:0},2000);
  4. };

and then call it in the options for bxslider like this...

  1. onSlideBefore: function(){ slideTextOut(); }

With this the text <div> does fade out, but the next slide already comes in to place so the user doesn't get to see the text area fading out before it does.

From this i'm guessing  i need to use the on complete function of 'animate'.

So I do this...

  1. function slideTextOut() {
  2.       var current = slider.getCurrentSlide();
  3.             $('ul.bxslider li:eq('+current+') div.text').animate({opacity:0},2000, function() {
  4.                   
  5.                   // I don't know what goes here to make it work....
  6.             
  7.             });
  8. };

As you can see, this is where I can stuck...



I'd like this to be the process...

 - user clicks to view a different slide
 - text <div> fades out completely
 - next slide slides in.

Please help me.