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 を引き続き使用できますが、JavaScript ではなく CSS3 アニメーションを使用できます。

お役に立てれば！

于 2013-01-31T20:31:18.297 に答える