1

我正在编写一个带有此标记的菜单的网站：

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

此外，每个子类别在属性中都有一种“id”，rel每个项目在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 的动画，这样它们就可以立即为新颜色设置动画 - 因为它们将设置动画，重置是否动画可能无关紧要，但那就是一个用户界面设计决策。

更新：

如果您有多个动画正在运行（您应该尽量避免）并且只希望在它们都完成后开始新的动画集，那么请注意哪些正在运行，哪些没有运行。

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

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

  2. 轮询jQuery 效果队列以查看动画是否仍在运行 - 这有一定的开销，如果您不注意，可能会使您的动画滞后（但如果您不注意，所有动画都注定会变得缓慢和滞后- 多个并行运行动画通常不利于性能）

于 2011-02-02T08:05:13.453 回答