jQuery bxSlider高级配置

Question

我正在尝试使用jQuery bxSlider淡入幻灯片上的元素。我正在尝试弄清楚如何使用currentSlideHtmlObject取回动画幻灯片中的H1。这是我现在的代码。动画在第一张幻灯片上运行，但我不能让它在每张幻灯片切换上运行。我找到了将currentSlideHtmlObject添加到onAfterSlide: 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",
              });
        });

在后滑动函数中。

希望能有所帮助。