Как сделать очередность с несколькими toggleClass?

Question

[del993788]

Здравствуйте. Попугулил, посмотрел, для себя решения не нашел, ну или просто прикрутить не смог)

$(".pr").click(function(){
$("#plus").toggleClass("dis"); 
$("#forma").toggleClass("pyat"); 
});

Вот такой короткий код. Подскажите как сделать, чтобы .pyat добавлялся только после того как добавиться .dis .

Помогите пожалуйста с кодом.

jsfiddle.net/z3vp4cwn . В начале должна быть прозрачность, потом ширина.

Answer 1

[lyeskin]

В toggleClass можно передать колбэк, используйте эту возможность.

Comments

[del993788]

Они это делают одновременно, а нужно по очереди jsfiddle.net/z3vp4cwn

[lyeskin]

qqignatqq: jsfiddle.net/z3vp4cwn/5

[lyeskin]

qqignatqq: JS не может знать когда закончится ваша анимация CSS , поэтому нужно явно задать таймаут для отработки второго тоггла, т.к. колбэк тоггла отрабатывает сразу после присвоения класса, но когда анимация еще не отыграла.

[del993788]

Подскажите, а как добавить еще и 3ий тогл?

[lyeskin]

qqignatqq: jsfiddle.net/z3vp4cwn/7 что-то вроде

Answer 2

[Иван]

Собственно в чем проблема добавьте проверку перед использованием третьей строки.

Comments

[del993788]

Не совсем понял. Вот посмотрите в моём случае jsfiddle.net/z3vp4cwn . В начале прозрачность, потом ширина.

[Иван]

qqignatqq: я не очень понимаю задумку. Вам нужно поочередное выполнение или переключение в зависимости от количества нажатий? Если первое, то используйте колбеки, если второе то условие.