jQuery rotate / transform

Chciałbym użyć tej funkcji, aby obrócić, a następnie zatrzymać się w określonym punkcie lub stopniu. W tej chwili element obraca się bez zatrzymywania. Oto kod: 

    <script type="text/javascript">
    $(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);
       }
    });
    </script>

Dzięki za pomoc

Author: jcubic, 2011-10-29
Source

5 answers

Po prostu usuń linię, która obraca ją o jeden stopień na raz i wywołuje skrypt na zawsze.

// Animate rotation with a recursive call
setTimeout(function() { rotate(++degree); },65);

Następnie przekaż żądaną wartość do funkcji... w tym przykładzie 45 dla 45 stopni. 

$(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)'});
        }

});

Zmień .css() na .animate(), aby animować obrót za pomocą jQuery. Musimy również dodać czas trwania animacji, 5000 na 5 sekund. I aktualizowanie oryginalnej funkcji w celu usunięcia nadmiarowości i obsługi więcej przeglądarki...

$(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: powyższy standardowy kod animacji CSS jQuery nie działa, ponieważ najwyraźniej jQuery .animate() nie obsługuje jeszcze CSS3 transforms.

Ten plugin jQuery ma animować obrót:

Http://plugins.jquery.com/project/QTransform

 32
Author: Sparky,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-05-20 15:37:23

To dlatego, że masz funkcję rekurencyjną wewnątrz rotate. Znowu się nazywa: 

// Animate rotation with a recursive call
setTimeout(function() { rotate(++degree); },65);
Wyjmij to i nie będzie działać rekurencyjnie.

Sugerowałbym również użycie tej funkcji zamiast: 

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

    });
}

Jest znacznie czystszy i będzie działał dla większości przeglądarek.

 11
Author: switz,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-04-17 18:24:58

Dlaczego po prostu nie użyć, 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;
    }

Możesz również dodać to do 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;
}

Który doda animację.

PS...

Aby odpowiedzieć na twoje pierwotne pytanie:

Powiedziałeś, że obraca się, ale nigdy się nie zatrzymuje. Podczas używania set timeout musisz się upewnić, że masz warunek, który nie wywoła settimeout, bo inaczej będzie działał w nieskończoność. Więc dla Twojego kodu: 
<script type="text/javascript">
    $(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 < 180){
      // Animate rotation with a recursive call
      setTimeout(function() { rotate(++degree); },65);
     }
    }
    });
    </script>
 7
Author: cpi,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-02-24 23:13:30

Wymyśliłem jakieś rozwiązanie problemu. Zawiera jquery i css. Działa to jak przełączanie, ale zamiast przełączania wyświetlania elementów, zmienia swoje właściwości po naprzemiennych kliknięciach. Po kliknięciu div obraca element z tagiem o 180 stopni, a po ponownym kliknięciu element z tagiem powraca do pierwotnej pozycji. Jeśli chcesz zmienić czas trwania animacji po prostu zmień czas przejścia własność.

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)'});
      }
  });

});

 1
Author: Raza,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-09-12 21:11:34 
t = setTimeout(function() { rotate(++degree); },65);

I clearTimeout aby zatrzymać 

clearTimeout(t);

Używam tego z AJAX 

success:function(){ clearTimeout(t); }
 0
Author: Sams,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-03-10 18:44:23