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", 
       }); 
     }); 

在滑動功能後。

希望它有幫助。