當Flexslider幻燈片有類「flex-active-slide」時顯示div

我正在使用Flexslider並且一切正常。我有一個div，其中包含某些幻燈片中的其他信息，但不一定包含所有幻燈片。我試圖完成的是一旦顯示幻燈片，這個div的jQuery動畫。當Flexslider幻燈片有類「flex-active-slide」時顯示div

所以，當滑動是有效的（它具有類.flex主動滑動）的股利將顯示，或向下滑動等

HTML：

<div class="flexslider"> 
    <ul class="slides"> 

     <li id="test" > 

      <div class="slide-content"> 
       <h1>Regular Content Here</h1> 
      </div> 
      <div class="slide-excerpt group" style="display:none;"> 
       <p>Hidden Content...should show when active</p> 
      </div>       

     </li> 

    </ul> 
</div><!--end flexslider-->

JQUERY（這是什麼我試過了，但沒有任何影響）：

jQuery(document).ready(function($) {  
    if ($('li#test').hasClass('flex-active-slide')){ 
     $("div.slide-excerpt").show(); 
    }; 
});

來源

2013-01-31 RevConcept

我最近回答了一個關於flexslider的類似問題。 http://stackoverflow.com/a/18245511/490592 –

我個人更傾向於通過CSS處理這個問題。

.flexslider .slides .slide-excerpt { 
    display:none; 
} 

.flexslider .slides .flex-active-slide .slide-excerpt { 
    display:block; 
}

並從HTML中刪除內聯樣式（style =「display：none」）。

現在，顯然，這隻顯示它。它不會添加花哨的動畫。但是，如果您已經將幻燈片製作成幻燈片，那麼在將另一個動畫元素添加到混音中之前，我會猶豫不決......這會導致非常繁忙的界面，並且可能會阻止用戶等待時間過長以獲得他們可能感興趣的信息。如果您必須爲其製作動畫，也許您仍然可以使用CSS，但使用CSS3動畫，而不使用JavaScript。

希望這會有所幫助！

來源

2013-01-31 20:31:18

我想要/需要動畫的原因是因爲「摘錄」區域落在幻燈片下方，增加了200px的高度。因此，使用片段的幻燈片和不是動畫片段的幻燈片之間的過渡是「突然的」，而幻燈片下方的內容則「上下」跳躍，而不是平滑過渡。合理？ – RevConcept

另外，內聯「display：none;」在上面的例子中只是內聯的，爲了簡單起見。在我的開發網站它在我的外部樣式表。 – RevConcept

嗯。對不起，我無法想象它，沒有足夠的代碼來更好地瞭解爲什麼這不適合你。您總是可以將摘錄區域定位在具有幻燈片的幻燈片中，以便它們總是位於相對於幻燈片的相同位置，這應該可以防止幻燈片高度發生變化，如果這是發生了什麼，但這是真的只是一個盲目的猜測，對不起。 –

當Flexslider幻燈片有類「flex-active-slide」時顯示div

回答

相關問題