jquery - Onclick Javascript Function Not Working -

jquery - Onclick Javascript Function Not Working -

i have image want rotated,

<img src="images/anchor.png" alt="robot image" class="robot rotate" width="100px" height="100px" />

the next css code rotate image

.rotate{ -webkit-transition-duration: 0.8s; -moz-transition-duration: 0.8s; -o-transition-duration: 0.8s; transition-duration: 0.8s; -webkit-transition-property: -webkit-transform; -moz-transition-property: -moz-transform; -o-transition-property: -o-transform; transition-property: transform; overflow:hidden; } .rotate:hover { -webkit-transform:rotate(-90deg); -moz-transform:rotate(-90deg); -o-transform:rotate(-90deg); }

and lastly jquery create happen onclick

$(document).ready(function () { $('img.rotate').click(function () { $('img.rotate').addclass('hover'); }, function () { $('img.rotate').removeclass('hover'); }); alert("working?"); });

but when click on image happens image rotates due css. want happen when image clicked begin rotate, not when hover on it.

here's fiddle http://jsfiddle.net/sneakmiggz/7b8ya/

demo use .hover in css. adding class .hover js, css :hover wont work it. use $(this) wherever possible. use .toggleclass() add/remove class.

css:

.rotate.hover { -webkit-transform:rotate(-90deg); -moz-transform:rotate(-90deg); -o-transform:rotate(-90deg); }

js:

$('img.rotate').click(function () { $(this).toggleclass('hover'); });

javascript jquery css css3 onclick