FlexSlider after event not firing (or correctly formed)

Question

I'm using Flexslider to animate a series of rolling slides. It's in and working just fine. What I'm now wanting to do is make use of the 'after:' callback to fadeIn the headline within the slide. In terms of a run order it would look something like this:

1. Slide (containing a background image) fades in.
2. Pause (1 second).
3. Headline fades in.

I'm using the following function alongside the 'after:' event and wouldn't you know it, it's not working. The headline has been set to display: none; but never shows (and yes, my timing is fine).

after: function(){$('.headline').fadeIn(500);},

HTML:

<li>
    <div class="slide">
            <div class="headline">Headline text goes here</div>
    </div>
</li>

Guidance would be appreciated.

Thanks, @rrfive

Answer 1

you missed 'slider' object in your function call:

after: function(slider){
//do your stuff here
}

It's also necessary specify which of .headline elements you want to fadeIn by this way:

after: function(slider){
 curSlide = slider.slides[slider.currentSlide];
 $(curSlide).find('.headline').fadeIn(500);
}

Check the documentations given by woothemes guys, you will find all you need. If you have problems reply here. Best regards