1

このマークアップを含むメニューを持つ Web サイトをコーディングしています。

<div id="grafico-wrapper">
    <h2>Gráfico</h2>
    <ul id="grafico-categories" class="categories-menu">
        <li><a href="#" rel="cat1">Category1</a></li>
        <li><a href="#" rel="cat2">Category2</a></li>
        <li><a href="#" rel="cat3">Category3</a></li>
    </ul>
    <ul id="grafico-projects" class="projects-menu">
        <li><a href="#" class="slider-link" rel="cat2,cat1">Project1</a></li>
        <li><a href="#" class="slider-link" rel="cat2,cat1">Project2</a></li>
        <li><a href="#" class="slider-link" rel="cat1">Project3</a></li>
        <li><a href="#" class="slider-link" rel="cat2">Project4</a></li>
        <li><a href="#" class="slider-link" rel="cat1,cat3">Project5</a></li>
        <li><a href="#" class="slider-link" rel="cat1">Project6</a></li>
        <li><a href="#" class="slider-link" rel="cat3">Project7</a></li>
    </ul>
</div>

<div id="producto-wrapper">
    <h2>Producto</h2>
    <ul id="producto-categories" class="categories-menu">
        <li><a href="#" rel="cat1">Category1</a></li>
        <li><a href="#" rel="cat2">Category2</a></li>
        <li><a href="#" rel="cat3">Category3</a></li>
    </ul>
    <ul id="producto-projects" class="projects-menu">
        <li><a href="#" class="slider-link" rel="cat2,cat1">Project1</a></li>
        <li><a href="#" class="slider-link" rel="cat1,cat3">Project2</a></li>
        <li><a href="#" class="slider-link" rel="cat1">Project3</a></li>
        <li><a href="#" class="slider-link" rel="cat2,cat3">Project4</a></li>
        <li><a href="#" class="slider-link" rel="cat2">Project5</a></li>
        <li><a href="#" class="slider-link" rel="cat3">Project6</a></li>
    </ul>
</div>

基本的に 2 つのメイン カテゴリ ("grafico" と "producto") があり、それぞれにサブカテゴリ ( ul.categories-menu) とプロジェクト ( ul.projects-menu) があります。

また、サブカテゴリのそれぞれには、rel属性に一種の「id」があり、各プロジェクトには、rel属しているサブカテゴリのコンマ区切りのリストが属性にあります。

だから、私が達成したいのは、サブカテゴリのリンクをクリックすると、そのrelサブカテゴリのrel値に含まれるこのカテゴリのすべてのプロジェクトが「強調表示」される (別の色に変わる) が、「カスケード」方式であるということです。 (上から下にプロジェクトの色が変化します)、その後、別のサブカテゴリ リンクをクリックすると、すべてのプロジェクトが元の色に変わり、ハイライト カスケードが属するプロジェクトで再び開始されます。新しくクリックされたサブカテゴリ。

また、xcolorプラグインを使用して、animate()関数がハイライトの色をスムーズに変更できるようにしています。

これはこれまでの私の（簡略化された）コードです：

highlight: function(elem) {
    //clear previous highlights
    this.clearHighlight();
    elem = $(elem);
    var rel = elem.attr('rel');
    var highlight_color = '#6666F0';
    var highlightSpeed = 400;
    var highlightDelay = 100;

    //we highlight the sub-category element
    elem.animate({color: highlight_color}, highlightSpeed).addClass('highlighted');
    //we find the projects matching the rel attribute and we highlight them
    elem.parents('ul.categories-menu')
        .nextAll('ul.projects-menu')
        .find('a[rel*=' + rel + ']')
        .each(function(i, elem) {
            $(elem).delay(i * highlightDelay).animate({color: highlight_color}, highlightSpeed).addClass('highlighted');
    });
},

clearHighlight: function() {
    var defColor = '#BABABA';
    var highlightSpeed = 400;
    $('#menu').animate({color: defColor}, highlightSpeed).removeClass('highlighted');
}

このコードは非常にうまく機能しますが、「カスケード」効果は完全には機能していません。たとえば、プロジェクト 1、3、4、および 6 が強調表示されている場合 (最初のカスケードは適切に機能します)、プロジェクト 1 を強調表示する別のサブカテゴリをクリックすると、 、4、5、6（注1、4は共通）、

  • 私が望むのは、すべてのプロジェクトがデフォルトの色に戻され、プロジェクト1、4、5、および6が少し遅れて次々と強調表示されることです
  • 私が得るのは、すべてのプロジェクトがデフォルトの色に戻され、プロジェクト5、6、1、および4が少し遅れて次々に強調表示されることです（1と4は、最初に戻るのに時間がかかるため、後で強調表示されます）古い状態に）

私の問題をうまく説明できれば幸いです。この小さな問題を解決するために誰かが私を正しい方向に向けることができますか?

ありがとうございました

4

1 に答える 1

2

jQuery のすべてのアニメーションで、成功ハンドラーを指定できます。

新しいアニメーションをトリガーする前に、1 と 4 がリセットされるのを待つ必要があるようです。これは、1 と 4 のリセットアニメーションの成功ハンドラーを介して行うことができます。これにより、新しいアニメーションの開始が遅れます。インターフェースが遅く感じられるため、ユーザーにとって迷惑になる可能性があります。

より良い方法は、最初にそれらをリセットするのではなく、1 と 4 の色から新しい色に直接アニメーション化することです。すぐにアニメーション化する必要がないため、3 と 6 のみをリセットします。

また、3 と 6 のリセットと、直接リセットされる 1 と 4 のみをアニメーション化して、すぐに新しい色にアニメーション化する準備ができているようにすることもできます。 UIデザインの決定。

アップデート：

複数のアニメーションを実行していて (これは避けるべきです)、それらがすべて終了したときにのみ新しいアニメーションのセットを開始したい場合は、何が実行されていて何が実行されていないかを数えておいてください。

これは複数の方法で実行できます。

  1. カウントを手動で保持: アニメーションを開始するたびにカウンターを増やし、アニメーションを終了するたびにカウンターを減らします - カウントを減らすサクセスハンドラーで、ゼロカウントのチェックを行い、新しいアニメーションを開始します。CaveAt: ここで競合状態が発生する可能性がありますが、これは少し注意して処理することができます :)

  2. jQueryエフェクトキューをポーリングして、アニメーションがまだ実行されているかどうかを確認します-これには特定のオーバーヘッドがあり、注意しないとアニメーションが遅くなる可能性があります（ただし、注意しないと、すべてのアニメーションが遅くなる運命にあります） - 複数の並列実行アニメーションは、一般的にパフォーマンスにとって悪い考えです)

于 2011-02-02T08:05:13.453 に答える