JQuery UI (ядро эффектов) addClass / removeClass для одного элемента с несколькими селекторами, но есть одна загвоздка

Я почти уверен, что это именно то, что вам нужно. Я скопировал общий HTML-макет с http://makr.com (вы упомянул, что это было то, что вы хотели):

Демо: http://jsfiddle.net/SO_AMK/xm7Sk/

jQuery:

$(".main article:nth-child(4n)").after('<hr class="split"></hr>');
$(".main > article .slidedown").click(function(e) {
        e.stopPropagation();
}); // If you click on the slidedown, it won't collapse

var canAnimate = true,
    slideIsOpen = false,
    animateSpeed = 1000;

$(".main > article").hover(function() {
    $(this).addClass("hover");
}, function() {
    $(this).removeClass("hover");
}).click(function() {
    if (canAnimate) {
        canAnimate = false;
        var article = $(this),
            isThisOpen = article.hasClass("active");
        if (isThisOpen) {
            $(".main").queue(function () {
                hideSlide($(this))
            });
        }
        else {
            if (slideIsOpen) {
                $(".main").queue(function () {
                    hideSlide($(this));
                }).queue(function () {
                    positionPage(article, $(this));
                }).queue(function () {
                    showSlide(article, $(this));
                }).queue(function () {
                    positionPage(article, $(this));
                });
            }
            else {
                $(".main").queue(function () {
                    positionPage(article, $(this));
                }).queue(function () {
                    showSlide(article, $(this));
                }).queue(function () {
                    positionPage(article, $(this));
                });
            }
        }
    }
});

function showSlide(elm, main) {
        canAnimate = false;
        slideIsOpen = true;
        elm.nextAll("hr.split").first().addClass("active", animateSpeed);

        elm.children(".slidedown").css("top", (elm.offset().top + 114)).addClass("active").slideToggle(animateSpeed);

        elm.addClass("active");
        main.dequeue();
        canAnimate = true;
}

function hideSlide(main) {
        canAnimate = false;
        $(".main article.active").nextAll("hr.split.active").removeClass("active", animateSpeed);

        $(".main article.active").children(".slidedown").removeClass("active").slideToggle(animateSpeed);

        $(".main article.active").removeClass("active");
        $(main).dequeue();
        canAnimate = true;
        slideIsOpen = false;
}

function positionPage(elm, main) {
    canAnimate = false;
    var body;
    if ($.browser.safari) {
        body = $("body");
    }
    else {
        body = $("html");
    }
    var elmTop = elm.offset().top,
        bodyScroll = body.scrollTop();
    if (bodyScroll - elmTop == 0) {
        var speed = 0;
    }
    else {
        var speed = animateSpeed;
    }
    body.animate({
        scrollTop: elmTop
    }, speed, function () {
        main.dequeue();
        canAnimate = true;
    })
}​

Это может показаться большим сценарием для чего-то настолько маленького, но в нем есть некоторые средства защиты от сбоев. Единственная ошибка в том, что если вы начинаете быстро нажимать во время переходов, иногда очереди оказываются в неправильном порядке. Но средний пользователь не щелкает быстро во время анимации: D

Примерьте это для увеличения размера: http://jsfiddle.net/Bv57T/3/

Основные изменения:

1. У вас было 2 привязки .click к одному и тому же селектору $('.main div'). Я считаю, что это технически поддерживается, но для этого нет причин, и это усложняет отслеживание вашего кода.
2. .toggle() не принимает функции в качестве параметров. Проверьте его в документации; это не похоже на hover().
3. Нет причин иметь отдельные функции для добавления и удаления. Вы также дважды удаляете классы. Вы хотели, чтобы следующий HR был открытым и оставался открытым? Или хотите, чтобы она открывалась и закрывалась немедленно? В последнем случае для этой строки $('hr').removeClass('open', 1000); нет причин. В первом случае нет причин для второй функции () с $(this).nextAll("hr").first().removeClass('open', 500).

Вот javascript, который я использовал в скрипке

$(document).ready(function() {
    //dynamcally adds the <hr> after every 4th div.
    $(".main div:nth-child(4n)").after('<hr class="closed"></hr>');
    //puts a blue border on the squares
    $('.main div').hover(
        function()  {
            $(this).addClass('select');
        },
        function() {
            $(this).removeClass('select')
    });
    //changes the color of the active square to red and "deactivates" the previous one.
    $('.main div').click(function()  {
        $('hr.open').removeClass('open', 1000);
        if(!$(this).hasClass('active')) {
           $(this).nextAll("hr").first().addClass('open', 500);
        }
        $(this).toggleClass('active').siblings().removeClass('active');
    });
});​

Если это не совсем то, что вы хотите и не можете понять отсюда, продолжайте и отправляйте ответ, и я могу еще раз взяться за это.

Изменить Новая и улучшенная версия: http://jsfiddle.net/Bv57T/4/ Также обновлен js выше.

По-прежнему можно подделать это, если вы нажмете второй div во время анимации. Вы можете обойти это, установив для (global) bool значение true на время анимации и проверяя его перед запуском следующей анимации.

Но корень проблемы в том, что вы пытаетесь дублировать состояние пользовательского интерфейса (другими словами, DOM) как состояние приложения. Это может стать непростым делом даже с простыми операциями (как вы сами видели). Я предпочитаю использовать библиотеку, которая отделяет пользовательский интерфейс от приложения. Их обычно называют MVC (модель-представление-контроллер) или MVVM (модель-представление-модель просмотра - прозвище, которое я ненавижу, потому что оно намеренно сбивает с толку). Мне больше всего нравится knockout.js. Он полностью совместим с jQuery и jQuery UI; посмотрите этот пример: анимированные переходы.

Таких библиотек больше. Backbone.js - один, knockback.js сочетает в себе нокаут и backbone. Я знаю, что забываю некоторые другие популярные и хорошие ...