jQuery 中的连锁效应

Question

我正在编写一个具有以下标记菜单的网站：

<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 稍后突出显示，因为他们首先需要一些时间才能恢复到旧状态）

我希望我可以解释我的问题，有人可以指出我正确的方向来解决这个小问题吗？

谢谢

Answer 1

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

在我看来你需要等待 1 & 4 要在触发新动画之前重置，您可以通过 1 & 的重置动画的成功处理程序来执行此操作。 4. 这会延迟启动新动画，这可能会让用户感到厌烦，因为界面会感觉迟缓。

更好的方法可能是为 1 & 制作动画。 4 直接从它们拥有的任何颜色到新的颜色，而不是先重置它们，即。仅重置 3 & 6 因为它们不需要立即再次设置动画。

您也可以只为 3 和 3 的重置设置动画。 6、直接复位1&; 4 因此他们准备立即为新颜色设置动画 - 因为他们将设置动画，因此重置是否设置动画可能并不重要，但这是 UI 设计的决定。

更新：

如果您正在运行多个动画（您应该尽量避免）并且只希望在所有动画完成后启动新的动画集，只需记下正在运行的动画和未运行的动画即可。

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

1. 手动保持计数：每次启动动画时增加计数器，每次结束动画时减少计数器 - 在成功处理程序中，减少计数检查零计数并启动新动画。 CaveAt：这里可能存在竞争条件，但可以稍微小心地处理:)

2. 轮询 jQuery效果队列来查看动画是否仍在运行 - 这有一定的开销，如果您不小心，可能会使您的动画变得迟缓（但如果您不采取措施，所有动画都注定会缓慢且迟缓）注意 - 多个并行运行的动画通常对性能来说是一个坏主意）