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 · Accepted 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

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

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

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

[jquery] jQuery rotate/transform

Examples related to jquery

Examples related to transform

Examples related to rotation