html - Rotate a div in jQuery and stopping it with value recieved from server -


i rotating div using keyframe animation , working fine. while div rotating waiting server response , once recieve response (which angle) want stop div @ particular angle.

i tried remove class animating when div coming orignal position visual flick , resting @ required place.

here jsfiddle http://jsfiddle.net/bvkwh/3/

jquery :

$("#stop").click(function () {     var pos = $(".pos").val();     $("#bg > img").removeclass('animate');     $("#bg > img").css({         '-webkit-transform': 'rotate(' + pos + 'deg)'     });     $("#bg > img").css({         '-moz-transform': 'rotate(' + pos + 'deg)'     }); });  $("#start").click(function () {     $("#bg > img").addclass('animate');         }); 

css:

#bg {     height: 500px;     width: 500px;     overflow:hidden; } #bg > img {     -webkit-transition: 2s;     -moz-transition: 2s; } #bg > img.animate {     -webkit-animation: spinit 6s infinite linear;     -moz-animation: spinit 6s infinite linear; } @-webkit-keyframes spinit {     100% {         -webkit-transform: rotate(360deg);     } } @-moz-keyframes spinit {     100% {         -webkit-transform: rotate(360deg);     } } 

any solutions that.. want work on ipad browsers.. in advance !

remove class animate after setting css properties.

edit: richard points out not work. possible value, conversation matrix degrees needed final part of animation.

$("#stop").click(function () {     var iimg = $("#bg > img");     // current transformation     var ccss = getcomputedstyle(iimg.get(0));     var matrix = ccss.getpropertyvalue('transform') || ccss.getpropertyvalue('-moz-transform') || ccss.getpropertyvalue('-webkit-transform');     // wanted new value     var pos = $(".pos").val();      // stop css transformation     iimg.removeclass('transtime');     iimg.css({         '-webkit-transform': matrix,         '-moz-transform': matrix,         'transform': matrix,     });     iimg.removeclass('animate'); 

some css , markup updates needed well. http://jsfiddle.net/bvkwh/4/


Comments

Popular posts from this blog

java - activate/deactivate sonar maven plugin by profile? -

python - TypeError: can only concatenate tuple (not "float") to tuple -

java - What is the difference between String. and String.this. ? -