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。

希望这有帮助！

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

1 个答案: