jquery right lower corner rotation Ring Menu Special effects code _javascript tips

jquery implementation of the lower right corner of the rotating Ring menu special effects code, is fixed in the lower right corner of the page, when the user clicked the Main Menu button, the submenu item will rotate into the page in a loop, and use ANIMATE.CSS to make animation effect.
The effect chart is as follows:

Online Preview Click to download

HTML code:

<div class= "Htmleaf-container" >
 <div id= ' ss_menu ' >
  <div>
  <i class= "fa fa-qq" > </i>
  </div>
  <div>
  <i class= "fa Fa-weibo" ></i>
  </div>
  <div>
  <i class= "fa fa-weixin" ></i>
  </div>
  <div>
  <i class= "fa Fa-renren "></i>
  </div>
  <div class= ' menu ' >
  <div class= ' share ' id= '" Ss_ Toggle ' data-rot= ' >
   <div class= ' Circle ' ></div>
   <div class= ' bar ' ></div>
  </div>
  </div>
 </div>
</div>

JS Code:

$ (document). Ready (function (EV) {
 var toggle = $ (' #ss_toggle ');
 var menu = $ (' #ss_menu ');
 var rot;
 $ (' #ss_toggle '). On (' click ', function (EV) {
  rot = parseint ($ (this). Data (' rot '))-180;
  Menu.css (' transform ', ' rotate (' + rot + ' deg) ');
  Menu.css (' webkittransform ', ' rotate (' + rot + ' deg) ');
  if (rot/180% 2 = 0) {
   toggle.parent (). addclass (' ss_active ');
   Toggle.addclass (' close ');
  } else {
   toggle.parent (). Removeclass (' ss_active ');
   Toggle.removeclass (' close ');
  }
  $ (this). Data (' rot ', rot);
 });
 Menu.on (' Transitionend webkittransitionend otransitionend ', function () {
  if (rot/180% 2 = 0) {
   $ (' #ss_menu Div i '). addclass (' ss_animate ');
  } else {
   $ (' #ss_menu div i '). Removeclass (' ss_animate ');}});