how can i rotate a glyphicon with animate in jquery?

Question

I want to do something like this:

$('.btn-chat').click(function(){
$('.glyphicon.glyphicon-chevron-left').animate({
transform: 'rotate(+=180deg)'
});
});

Answer 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));