/js/main.js

https://bitbucket.org/sgospodarets/cross-browser-rotate-box · JavaScript · 29 lines · 24 code · 0 blank · 5 comment · 0 complexity · a99a5bb3e6efd95c08f4e43ce77542ef MD5 · raw file

  1. $(function() {
  2. // VARS
  3. var $rotateWrappers = $('.rotate-wrapper');
  4. var rotatePath = '.rotate';
  5. var animSpeed = 500;// ms
  6. var fromRad = degToRad(0);// deg
  7. var toRad = degToRad(90);// deg
  8. var fullRad = toRad - fromRad;
  9. // FUNCTIONS
  10. // convert
  11. function degToRad(_deg){// degrees -> radians
  12. return _deg * (Math.PI * 2 / 360);
  13. }
  14. // recalc
  15. function recalcAnimtime(currentRad,animToGrad){/* for anim with same speed */
  16. var leftPerc = Math.abs(animToGrad-currentRad)/fullRad;
  17. return leftPerc*animSpeed;
  18. }
  19. // EVENTS
  20. $rotateWrappers.each(function(){
  21. var $rotateWrapper = $(this);
  22. var $rotate = $rotateWrapper.find(rotatePath)
  23. $rotateWrapper.hover(function(){
  24. $rotate.stop().animate({rotate: toRad+'rad'}, recalcAnimtime($rotate.css('rotate'),toRad));
  25. },function(){
  26. $rotate.stop().animate({rotate: fromRad+'rad'}, recalcAnimtime($rotate.css('rotate'),fromRad));
  27. });
  28. });
  29. });