web-dev-qa-db-fra.com

jQuery tourner/transformer

Je voudrais utiliser cette fonction pour faire pivoter puis arrêter à un point ou à un degré particulier. Pour le moment, l'élément 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 de votre aide

jquerytransformrotation
20
Andrea

Supprimez simplement la ligne qui le fait pivoter d'un degré à la fois et appelle le script pour toujours.

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

Puis transmettez la valeur souhaitée à la fonction ... dans cet exemple 45 pour 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)'});
        }

});

Changez .css() en .animate() afin de animer la rotation avec jQuery . Nous devons également ajouter une durée pour l’animation, 5000 pour 5 secondes. Et mettre à jour votre fonction d'origine pour supprimer certaines redondances et prendre en charge davantage 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: Le code d'animation CSS jQuery standard ci-dessus ne fonctionne pas car, apparemment, jQuery .animate() ne prend pas encore en charge CSS3 transforms.

Ce plugin jQuery est supposé animer la rotation:

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

32
Sparky

C'est parce que vous avez une fonction récursive dans rotation. Il s'appelle à nouveau:

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

Enlevez cela et il ne continuera pas à courir récursivement.

Je suggérerais aussi simplement d’utiliser 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 fonctionnera pour la plupart des navigateurs.

11
switz

Pourquoi ne pas simplement utiliser, 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;
    }

vous pouvez aussi ajouter ceci au 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;
}

ce qui va ajouter l'animation.

PS ... 

pour répondre à votre question initiale:

vous avez dit qu'il tourne mais ne s'arrête jamais. Lorsque vous utilisez le délai d'attente défini, vous devez vous assurer que vous avez une condition qui n'appellera pas settimeout ou elle fonctionnera indéfiniment. Donc pour votre 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>
7
cpi

Je suis venu avec une sorte de solution au problème. Il implique jquery et css. Cela fonctionne comme une bascule, mais au lieu de basculer l'affichage des éléments, il modifie simplement ses propriétés lors de clics alternatifs. En cliquant sur le div, il fait pivoter l'élément avec l'étiquette de 180 degrés et lorsque vous cliquez dessus à nouveau, l'élément avec l'étiquette revient à sa position initiale. Si vous souhaitez modifier la durée de l'animation, modifiez simplement la propriété transition-duration.

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
Raza
t = setTimeout(function() { rotate(++degree); },65);

et clearTimeout pour arrêter

clearTimeout(t);

Je l'utilise avec AJAX

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