2

我正在使用 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();
    };
});
4

1 回答 1

0

我个人更倾向于通过 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-31T20:31:18.297 回答