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＆amp; 4在触发新动画之前要重置，你可以通过1和1的重置动画的成功处理程序来完成。 4.这会延迟启动新动画，因为界面会感觉很迟钝，这会让用户感到烦恼。

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

您也可以仅设置3＆amp;的重置动画。 6，直接复位1＆amp; 4这样他们就可以立即为新颜色制作动画了 - 因为它们会动画化，重置动画可能并不重要，但这是一个ui设计决定。

更新

如果你有多个动画正在运行（你应该尽量避免）并且只希望在它们全部完成时启动新的动画集，那么就要记住正在运行的动画和不动的动画。< / p>

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

手动计数：每次开始动画时增加一个计数器，每次结束时减少一个计数器 - 在减少计数检查零计数并启动新动画的成功处理程序中。 CaveAt：这里有一个可能的竞争条件，但可以稍微小心处理：）
轮询jQuery effects queue以查看动画是否仍在运行 - 这有一定的开销，如果你不小心，可能会让你的动画变得迟钝（但是所有的动画注定都很慢）如果你不小心，就会出现滞后现象 - 多个并行运行的动画通常对性能不利）

jQuery中的链效应

1 个答案: