jQuery bxSlider 高级配置

Question

我正在尝试使用 jQuery bxSlider 淡入幻灯片上的元素。我试图弄清楚如何使用 currentSlideHtmlObject 来取回动画幻灯片内的 H1。这是我现在的代码。动画在第一张幻灯片上运行，但我无法让它在每个幻灯片过渡上运行。我找到了将 currentSlideHtmlObject 添加到 onAfterSlide: function() 的选项，但不知道如何使用它来定位幻灯片内的每个 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",
              });
        });

在幻灯片后功能中

。希望有帮助。