jQuery rotate transform

Question

I d like to use this function to rotate then stop at a particular point or degree  Right now the element just rotates without stopping  Here s the code        lt script type  text javascript  gt        function            var  elie       bkgimg           rotate 0          function rotate degree                   For webkit browsers  e g  Chrome             elie css   WebkitTransform   rotate     degree    deg                    For Mozilla browser  e g  Firefox             elie css    -moz-transform    rotate     degree    deg                     Animate rotation with a recursive call            setTimeout function     rotate   degree     65                         lt  script gt    Thanks for your help

User · Answer

I came up with some kind of solution to the problem. It involves jquery and css. This works like toggle but instead of toggling the display of elements it just changes its properties upon alternate clicks. Upon clicking the div it rotates the element with tag 180 degrees and when you click it again the element with tag returns to its original position. If you want to change the animation duration just change transition-duration property.

CSS

#example1{
transition-duration:1s;
}

jQuery

$(document).ready( function ()  {  var toggle = 1;
  $('div').click( function () {
      toggle++;
      if ( (toggle%2)==0){
          $('#example1').css( {'transform': 'rotate(180deg)'});
      }
      else{
          $('#example1').css({'transform': 'rotate(0deg)'});
      }
  });

});

User · Answer

Why not just use  toggleClass on click   js     this  toggleClass  up      css   button up       -webkit-transform  rotate 180deg          -moz-transform  rotate 180deg           -ms-transform  rotate 180deg            -o-transform  rotate 180deg               transform  rotate 180deg                     IE6   IE9                   filter  progid DXImageTransform Microsoft Matrix M11 0 9914448613738104  M12 -0 13052619222005157 M21 0 13052619222005157  M22 0 9914448613738104  sizingMethod  auto expand                     zoom  1          you can also add this to the css   button          -webkit-transition  all 500ms ease-in-out          -moz-transition  all 500ms ease-in-out          -o-transition  all 500ms ease-in-out          -ms-transition  all 500ms ease-in-out      which will add the animation   PS      to answer your original question   you said that it rotates but never stops  When using set timeout you need to make sure you have a condition that will not call settimeout or else it will run forever  So for your code    lt script type  text javascript  gt        function          var  elie       bkgimg         rotate 0        function rotate degree              For webkit browsers  e g  Chrome      elie css   WebkitTransform   rotate     degree    deg               For Mozilla browser  e g  Firefox      elie css    -moz-transform    rotate     degree    deg               add a condition here for the extremity         if degree  lt  180            Animate rotation with a recursive call       setTimeout function     rotate   degree     65                             lt  script gt

User · Answer

It s because you have a recursive function inside of rotate   It s calling itself again      Animate rotation with a recursive call setTimeout function     rotate   degree     65     Take that out and it won t keep on running recursively   I would also suggest just using this function instead   function rotate  el  degrees         el css      -webkit-transform     rotate   degrees  deg          -moz-transform     rotate   degrees  deg             -ms-transform     rotate   degrees  deg              -o-transform     rotate   degrees  deg                 transform     rotate   degrees  deg                      zoom    1              It s much cleaner and will work for the most amount of browsers

User · Answer

Simply remove the line that rotates it one degree at a time and calls the script forever      Animate rotation with a recursive call setTimeout function     rotate   degree     65     Then pass the desired value into the function    in this example 45 for 45 degrees       function          var  elie       bkgimg        rotate 45            function rotate degree             For webkit browsers  e g  Chrome             elie css   WebkitTransform   rotate     degree    deg               For Mozilla browser  e g  Firefox             elie css    -moz-transform    rotate     degree    deg                       Change  css   to  animate   in order to animate the rotation with jQuery   We also need to add a duration for the animation  5000 for 5 seconds   And updating your original function to remove some redundancy and support more browsers       function          var  elie       bkgimg        rotate 45            function rotate degree                 elie animate                            -webkit-transform    rotate     degree    deg                             -moz-transform    rotate     degree    deg                             -ms-transform    rotate     degree    deg                             -o-transform    rotate     degree    deg                             transform    rotate     degree    deg                             zoom   1                5000                   EDIT   The standard jQuery CSS animation code above is not working because apparently  jQuery  animate   does not yet support the CSS3 transforms   This jQuery plugin is supposed to animate the rotation   http   plugins jquery com project QTransform

User · Answer

t   setTimeout function     rotate   degree     65     and clearTimeout to stop  clearTimeout t     I use this with AJAX  success function    clearTimeout t

[jquery] jQuery rotate/transform

Examples related to jquery

Examples related to transform

Examples related to rotation