цепные эффекты в 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).

Также каждая из подкатегорий имеет своего рода "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 подсвечиваются позже, потому что сначала они занимают некоторое времявозвращаясь к старому состоянию)

Надеюсь, я объяснил свою проблему хорошо, может кто-нибудь направит меня в правильном направлении, чтобы решить эту маленькую проблему?

Спасибо

Answer 1

В каждой анимации в jQuery вы можете указать обработчик успеха.

Мне кажется, вам нужно подождать, пока 1 и 4 будут сброшены, прежде чем запускать новую анимацию, вы можете сделать это через обработчик успехаанимация сброса для 1 и 4. Это даст задержку для запуска новой анимации, и это может стать раздражающим для пользователя, так как интерфейс будет чувствовать себя запаздывающим.

Возможно, лучшим способом будет анимировать1 и 4 непосредственно от любого цвета к новому, вместо того, чтобы сначала сбрасывать их, т.е.Сбрасывайте только 3 и 6, поскольку им не нужно сразу же анимировать.

Вы также можете анимировать только сброс 3 и 6 и непосредственный сброс 1 и 4, чтобы они были готовы к анимации.новый цвет сразу - так как они будут анимировать, это может не иметь значения, если перезагрузка анимирована, но это решение пользовательского интерфейса.

Обновление:

В случае, если у вас есть несколькоанимации запущены (чего вам следует избегать), и вы хотите запускать новый набор анимаций только после того, как все они будут завершены, просто следите за тем, что запущено, а что нет.

Вы можете сделать это несколько разспособы:

1. вести счет вручную: увеличивать счетчик каждый раз, когда вы запускаете анимацию, и уменьшать его каждый раз, когда вы заканчиваете один - в обработчике успеха, который уменьшает проверку счетчика для нулевого счета и запускает новые анимации,CaveAt: здесь есть возможное условие гонки, но оно может быть обработано с небольшой осторожностью:)

2. опрос очереди эффектов jQuery , чтобы увидеть, все ли анимации все еще работают- это имеет определенные накладные расходы, которые могут сделать анимацию медленной, если вы не позаботитесь (но тогда все анимации обречены быть медленными и медленными, если вы не позаботитесь - многопараллельная анимация, как правило, является плохой идеей для производительности)