jQuery中的链效应

我正在编写一个网站，该网站的菜单包含以下标记：

<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>

这段代码运行得很好，但“级联”效果并不完全有效，例如：当突出显示项目1、3、4和6时（第一个级联效果很好），然后单击另一个子类别，该子类别应突出显示项目1、4、5和6（注1和4是常见的）

• 我想要的是：所有项目都设置回默认颜色，然后项目1、4、5和6一个接一个地高亮显示，几乎并没有延迟
• 我得到的结果是：所有项目都被设置回默认颜色，然后项目5、6、1和4一个接一个地高亮显示，几乎没有延迟（1和4稍后高亮显示，因为它们首先需要一些时间才能恢复到旧状态）

我希望我解释了我的问题好的，有人能给我指出解决这个小问题的正确方向吗

---

谢谢

在jQuery中的每个动画中，您都可以指定一个成功处理程序

在我看来，在触发新动画之前，您需要等待1&4被重置，您可以通过1&4重置动画的成功处理程序来执行此操作。这将导致启动新动画tho的延迟，这可能会让用户感到恼火，因为界面会感觉滞后

更好的方法可能是直接将1和4的颜色设置为新颜色，而不是先重置它们，即只重置3和6，因为它们不需要立即再次设置动画

您也可以只设置重置3和6以及直接重置1和4的动画，以便它们可以立即设置为新颜色的动画-因为它们将设置动画，所以重置是否设置动画可能无关紧要，但这是一个ui设计决策

更新：

如果您有多个动画正在运行（您应该尽量避免），并且只希望在所有动画都完成后启动新的动画集，那么只需计算哪些正在运行，哪些没有

您可以通过多种方式执行此操作：

手动保持计数：每次启动动画时增加计数器，每次结束动画时减少计数器-在successhandler中，减少零计数的计数检查并启动新动画。警告：这里可能有一种情况，但可以小心处理：）

轮询以查看动画是否仍在运行-如果您不小心，这会造成一定的开销，使您的动画变慢（但如果您不小心，则所有动画注定会变慢和变慢-多个并行运行的动画通常对性能不利）

---

谢谢你的回答。重点是，1和4只是一个常见的例子，事实上我知道成功处理程序，但我不知道如何在最后一个效果完成时触发它，因为即使尝试设置整个选择器的动画（不是逐个迭代），它也会为每个动画元素触发一次。谢谢，使用队列函数帮助我解决了这个问题

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');
}