0

複数の<li>要素を含む複数の<div>要素があります。それらのいくつかは、の開始displayプロパティを持っていますnone。マウスの相互作用に基づいて、いくつかの要素
を表示または非表示にします。<div>

CSSトランジションは、表示の変更をトランジションできません。また、高さと不透明度を0に設定することはお勧めできません。一部の要素には、入力またはボタンがあります。

次のステップは、アニメーションにJavaScriptを使用することでした。私はjQueryを使用しています。

私の問題は、非表示にするか、並行して表示する必要がある要素です。DOM構造のため、一部の要素は非表示になり、他の要素は表示されるため、親を非表示または表示することはできません。

だから私の質問は、コードをクリーンで保守しやすく、パフォーマンスを可能な限り維持しながら、複数の要素で複数の並列アニメーション（主にフェードとスライド）を効率的に処理するにはどうすればよいかということです。

マークアップの例。div要素を表示または非表示にする必要があります。

<ul>
    <li>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </li>
    <li>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </li>
    <li>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </li>
</ul>

ありがとうございました。

4

1 に答える 1

1

一緒に表示および非表示にする要素の各セットに同じクラスを割り当てることができます。これがなじみのないように聞こえる場合は、おそらくその概念に慣れるのに少し時間がかかるでしょう。これで開始できます：http：//api.jquery.com/hide/

<div class="first-class"></div>
<div class="second-class"></div>
<div class="third-class"></div>
<div class="first-class"></div>
<div class="third-class"></div>
<div class="second-class"></div>
于 2012-10-15T21:57:10.427 に答える