javascript - Animate CSS3 rotation onclick with prev and next -
i have circle need transform 90 degress when onclick fired on .next class , -90 degress when clicked on .prev
i have managed create following code based on google myself too!
$('.next').on('click',function(e){ $('.object').animate({textindent: 90}, { step: function(now,fx) { $(this).css('-webkit-transform','rotate('+now+'deg)').css('-moz-transform','rotate('+now+'deg)').css('transform','rotate('+now+'deg)'); }, duration:2000 },'linear'); }); $('.prev').on('click',function(e){ $('.object').animate({textindent: 0}, { step: function(now,fx) { $(this).css('-webkit-transform','rotate('+now+'deg)').css('-moz-transform','rotate('+now+'deg)').css('transform','rotate('+now+'deg)'); }, duration:2000 },'linear'); });
and far works 1 click! need rotate 180 if click twice on .next , 360 when click 4 times on .prev.
but can't seem working, why turning experts :)
you need incremental rotation.
i think topic has tips you:
Comments
Post a Comment