jQuery bxSlider詳細設定

Question

jQuery bxSliderを使用してスライドの要素をフェードインしようとしています。私はcurrentSlideHtmlObjectを使ってスライド内のH1をアニメーション化する方法を理解しようとしています。ここに私のコードがあります。最初のスライドでアニメーションが実行されますが、各スライドの切り替え時に実行することはできません。 onAfterSlide：function（）に追加するcurrentSlideHtmlObjectのオプションが見つかりましたが、スライド内の各h1をどのようにターゲットに使用するのかわかりません。

$(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> 

Answer 1

使用 -

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

の代わりに - 後のスライド機能で

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

。

願っています。