jQuery rotation/transformer

Je voudrais utiliser cette fonction pour faire tourner puis s'arrêter à un point particulier ou à un grade. Maintenant l'élément qui tourne sans s'arrêter. Voici le code:

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

Merci pour votre aide

InformationsquelleAutor Andrea | 2011-10-29

36

Simplement supprimer la ligne qui permet de faire tourner un degré à la fois et appelle le script pour toujours.
```
//Animate rotation with a recursive call
setTimeout(function() { rotate(++degree); },65);
```
Puis passer à la valeur désirée dans la fonction... dans cet exemple 45 de 45 degrés.
```
$(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)'});
        }

});
```
Changement .css() à .animate() pour animer la rotation avec jQuery. Nous avons également besoin d'ajouter une durée de l'animation, 5000 pendant 5 secondes. Et la mise à jour d'origine de votre fonction pour supprimer la redondance et de soutien de plus en plus de navigateurs...
```
$(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: La norme jQuery CSS animation de code ci-dessus n'est pas de travail parce qu'apparemment, jQuery .animate() ne prend pas encore en charge le CSS3 transforms.

Ce plugin jQuery est censé animer la rotation:

http://plugins.jquery.com/project/QTransform
- Qui vient de rotation de l'image. Je le veux vraiment, pour animer, faire tourner et s'arrêter à un certain point ou degré. Désolé, je l'ai mentionné qu'avant. Merci.
- Je suis à la recherche à votre page dans Safari et l'image est tournée de 45 degrés. En regardant les DOM dans la console, c'est montrer le bon CSS de -webkit-transform a été appliquée. Peut-être que votre navigateur ne prend pas en charge le CSS 3.
- simplement changer .css à .animate. Voir mon edit.
- désolé, j'ai oublié de parler de la "durée" requis pour l'animation. J'ai édité de nouveau.
- jQuery animate() ne prend pas en charge transforms je viens d'apprendre. Voici un plugin qui est censé le faire. plugins.jquery.com/project/QTransform
- Je l'ai eu. Je vais devoir travailler sur la doc un peu. Merci pour votre aide. J'ai essayé quelques autres plugins, mais ne pouvait pas les amener à aller. Peut-être que c'est l'un!
- vous êtes les bienvenus. Bonne chance.
InformationsquelleAutor Sparky

C'est parce que vous avez une fonction récursive à l'intérieur de rotation. Il appelle lui-même à nouveau:

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

L'enlever et de ne pas continuer à courir de manière récursive.

Je dirais aussi simplement à l'aide de cette fonction à la place:

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

    });
}

C'est beaucoup plus propre et va travailler pour le plus grand nombre de navigateurs.

InformationsquelleAutor switz

Pourquoi ne pas simplement utiliser, toggleClass sur cliquez sur?

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

vous pouvez également l'ajouter dans le fichier 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;
}

qui va ajouter de l'animation.

PS...

pour répondre à votre question initiale:

vous dit qu'il tourne mais ne s'arrête jamais. Lors de l'utilisation de temporisation, vous devez vous assurer que vous avez une condition qui n'ira pas en appel settimeout ou bien il va courir pour toujours. Alors, pour ton code:

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

InformationsquelleAutor cpi

1

Je suis venu avec une sorte de solution au problème. Il consiste à jquery et css. Cela fonctionne comme la bascule mais au lieu d'afficher /masquer les éléments qu'il modifie ses propriétés sur suppléant clics. En cliquant sur le div, il fait pivoter l'élément avec l'étiquette de 180 degrés et lorsque vous cliquez à nouveau l'élément avec la balise retourne à sa position d'origine. Si vous voulez changer l'animation de la durée viens de changer de transition-de la durée de la propriété.

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

InformationsquelleAutor Raza

t = setTimeout(function() { rotate(++degree); },65);

et clearTimeout pour arrêter

clearTimeout(t);

Je l'utiliser avec l'AJAX

success:function(){ clearTimeout(t); }

InformationsquelleAutor Sams

Vous devez vous connecter pour publier un commentaire.