当 Flexslider 幻灯片具有类“flex-active-slide”时显示 div

Question

我正在使用 Flexslider，一切正常。我有一个 div 将在某些幻灯片中包含其他信息，但不一定是所有幻灯片。一旦显示幻灯片，我想要完成的是这个 div 的 jQuery 动画。

因此，当幻灯片处于活动状态时（它具有 .flex-active-slide 类），div 会显示或向下滑动等。

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();
    };
});

Answer 1

我个人更倾向于通过 CSS 来处理这个问题。

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

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

并从您的 HTML 中删除内联样式 (style="display:none")。

现在，显然，这只会显示它。它不添加花哨的动画。但是，如果您已经为幻灯片设置了动画，我会犹豫再添加另一个动画元素...太多会导致界面非常繁忙，并且会让用户感到沮丧，不得不等待太久获取他们可能感兴趣的信息。如果您必须对其进行动画处理，也许您仍然可以使用 CSS，但使用 CSS3 动画，而不是 javascript。

希望这会有所帮助！