0

how can i rotate a glyphicon with animate in jquery?

I want to do something like this: $('.btn-chat').click(function(){ $('.glyphicon.glyphicon-chevron-left').animate({ transform: 'rotate(+=180deg)' }); });

23rd Feb 2017, 6:22 PM
Diego Serra
Diego Serra - avatar
1 Odpowiedź
+ 1
The way I usually do this and recommend is that you write all of your animations, keyframes, transforms, and transitions in your css for a class. Then use your on click or button click event etc to get the element(s) that you wish to perform the animation on and add/remove/toggle the class on those elements. This typically allows for faster coding and testing of your animations and easier code reusability. If you absolutely must do this within your function, try something like this: $('.btn-chat').click(function(){ var glyph = $('.glyphicon.glyphicon-chevron-left'); var degrees = glyph.getRotationDegrees() + 180; glyph.css({ '-webkit-transform' : 'rotate(' +degrees + 'deg)', '-moz-transform' : 'rotate(' + degrees + 'deg)', '-ms-transform' : 'rotate(' + degrees + 'deg)', 'transform' : 'rotate(' + degrees + 'deg)' }); }); (function ($) ) { $.fn.getRotationDegrees = function() { var matrix = obj.css("-webkit-transform") || obj.css("-moz-transform") || obj.css("-ms-transform") || obj.css("-o-transform") || obj.css("transform"); if(matrix !== 'none') { var values = matrix.split('(')[1].split(')')[0].split(','); var a = values[0]; var b = values[1]; var angle = Math.round(Math.atan2(b, a) * (180/Math.PI)); } else { var angle = 0; } return (angle < 0) ? angle + 360 : angle; }; }(jQuery));
24th Feb 2017, 12:51 AM
ChaoticDawg
ChaoticDawg - avatar