Форум Сайтостроение Веб-строительство

jquery animate

ebitok
На сайте с 07.11.2011
Offline
112
ebitok
569

по клику на картинку использую: 

$(this).css({

transform: 'rotateZ(90deg)',

transition: 'all 0.3s ease'

})

все ок, но как сделать так что бы по повторному клику ротация была нулевая?

в css Лазить нельзя, нужно только на Jquerty, а то потом забуду что где менялось

VHS
На сайте с 28.09.2007
Offline
142
VHS
#1

Предположу что http://jquery-docs.ru/Events/one/

I2
На сайте с 07.03.2015
Offline
38
indenger20
#2

Можно при клике задавать класс элементу, при повторном удалять его. "toggleClass()"

А к классу через css уже написаны стили. Я бы так поступил.

Качественная верстка PSD макетов (/ru/forum/974524)
Gerga
На сайте с 02.08.2015
Offline
94
Gerga
#3

ebitok, обычно так делается:


jQuery('.img_click_action').click(function(){
    var $this = $(this),
        rotateZ = $this.hasClass('rotate') ? '90' : '0';      
    $this.css({ 
        transform: 'rotateZ('+rotateZ+'deg)', 
        transition: 'all 0.3s ease' 
    });
    $this.toggleClass('rotate');
    return false;
});

https://jsfiddle.net/bnseegte/

N
На сайте с 05.12.2012
Offline
62
noskov
#4

мне кажется вот так проще всего

<style>

.rotate{

transform: 'rotateZ(90deg)',

transition: 'all 0.3s ease'

}

</style>

$('.img_click_action').on('click',(function(){

$(this). toggleClass('rotate');

})

);

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий