jQuery bxSlider Advanced configuration

I'm trying to use the jQuery bxSlider to fade in elements on my slides. I'm trying to figure out how i would use currentSlideHtmlObject to get back the H1 inside the slide that animate. Here is my code right now. The animation runs on the first slide, but I can't get it to run on each slide transition. I found the option of currentSlideHtmlObject to add to onAfterSlide: function() but don't know how i would use it to target each h1 inside the slide.

$(function(){
     $(".sliderWrapper开发者_运维知识库 li").each(function(index) {
      $(this).addClass('slide' + index);
    });
     $(".sliderWrapper").bxSlider({
        mode: 'fade',
        speed:500,
        pause: 8000,
        auto:true,
        autoHover: true,
        onAfterSlide: function(){

            $(".sliderWrapper li h1").each(function(){
                 $(this).animate({
                    opacity: 0.4,
                    fontSize: "3em",
                  });
            });
        },
    });


}); 

<ul class="sliderWrapper">
  <li><img src="images/jetGuy.png"/>
    <h1>professionalism defined.</h1>
    <div class="popup">popup</div>
  </li>
  <li><img src="images/jet.png" />
    <h1>professionalism defined.</h1>
    <div class="popup">popup</div>
  </li>
  <li><img src="images/personal.png" />
    <h1>professionalism defined.</h1>
    <div class="popup">popup</div>
  </li>
</ul>

use -

$(".sliderWrapper li:eq(currentSlide) h1").animate({
                opacity: 0.4,
                fontSize: "3em",
              });

Instead of -

$(".sliderWrapper li h1").each(function(){
             $(this).animate({
                opacity: 0.4,
                fontSize: "3em",
              });
        });

in the after slide function.

hope it helps.