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
Post a Comment