Есть ли у Jquery переключатель?

Question

[Енот Енотов]

Нужно по клику на картинку, повернуть ее на 90 градусов, делаю это с помощью библиотеке:
louisremi.github.io/jquery.transform.js
код :

$(this).animate({ transform: 'rotate(90deg)'});

Код работает все ок, но как сделать так, что бы по повторному клику, rotate возвращался на исходное положение?

Answer 1

[Stalker_RED]

Так? https://jsfiddle.net/5sbzfvno/

Comments

[Енот Енотов]

вообще да,спасибо, а есть какие-нибудь варианты, что бы не прибегать к правке .css файла?
Хотелось бы на чистом Jquery как-то сделать

по логике что-то напоминающее это:

$(this).toggleClass(css({
transform: 'rotateZ(90deg)',
transition: 'all 0.3s ease'
}))

[Stalker_RED]

Енот Енотов: Способы конечно есть, но это как-то противоестественно.

[Енот Енотов]

Stalker_RED: просто хотел что бы все что связано с JS манипуляциями были в одном месте, допустим удалю эту функцию, а css забуду поправить, ну да ладно, спасибо за пример, пока что им буду пользоваться

[Stalker_RED]

Енот Енотов: Можно сделать как-то так https://jsfiddle.net/5sbzfvno/1/
Но это извращение, кмк.

[Александр N++]

https://jsfiddle.net/5sbzfvno/2/

добавил stop()

[Serj-One]

Енот Енотов: >> "просто хотел что бы все что связано с JS манипуляциями были в одном месте" Мыслишь в корне не верно.
Правильное решение - как раз манипуляция классами через jQ. А вот прописывать css свойства напрямую в jQ - дурной тон.

[Енот Енотов]

спасибо, буду разбираться, а не подскажете почему качество трансформации такое плохое? Оно как бы размазывается, аж глаза режет. www.css3maker.com/text-rotation.html вот тут например тоже используют трансформацию текста, но нет всяческих размытий, сглаживание моментальное

[Stalker_RED]

Енот Енотов: Чем крупнее шрифт, тем меньше будет видно огрехи. А огрехи будут хотябы потому, что для наклонных начертаний никто хинтинг не делал. По крайней мере в большинстве шрифтов.

Answer 2

[Дмитрий Беляев]

Написать анимацию в виде css класса, добавлять/убирать класс через .toggleClass