CSS rotation de la croix-navigateur avec jquery.animate()

Je suis en train de travailler sur la création d'un cross-browser compatible rotation (ie9+) et j'ai le code suivant dans un jsfiddle

$(document).ready(function () { 
    DoRotate(30);
    AnimateRotate(30);
});

function DoRotate(d) {

    $("#MyDiv1").css({
          '-moz-transform':'rotate('+d+'deg)',
          '-webkit-transform':'rotate('+d+'deg)',
          '-o-transform':'rotate('+d+'deg)',
          '-ms-transform':'rotate('+d+'deg)',
          'transform': 'rotate('+d+'deg)'
     });  
}

function AnimateRotate(d) {

        $("#MyDiv2").animate({
          '-moz-transform':'rotate('+d+'deg)',
          '-webkit-transform':'rotate('+d+'deg)',
          '-o-transform':'rotate('+d+'deg)',
          '-ms-transform':'rotate('+d+'deg)',
          'transform':'rotate('+d+'deg)'
     }, 1000); 
}

Le CSS et le HTML sont vraiment simple et juste pour la démo:

.SomeDiv{
    width:50px;
    height:50px;       
    margin:50px 50px;
    background-color: red;}

<div id="MyDiv1" class="SomeDiv">test</div>
<div id="MyDiv2" class="SomeDiv">test</div>

La rotation des œuvres lors de l'utilisation de .css() mais pas lors de l'utilisation de .animate(); pourquoi est-ce et est-il un moyen de le réparer?

Grâce.

  • jQuery n'a aucune idée de comment animer la rotation. Peut-être utiliser des transitions CSS3?
  • sauf que IE9 ne prend pas en charge CSS3 Transitions.
  • Je vais upvote pour le "corriger" la partie (vous pourriez finir par mettre en place un step de rappel), mais le "pourquoi" de la partie est à peu près clair.
  • oui, je sais: l'objectif pour IE9 sera le soutien à l'aide de la méthode setInterval et d'appeler la DoRotate fonction plusieurs fois.
  • BTW, je l'ai déjà souligné le CSS du papier de verre de la bibliothèque dans ma réponse à votre autre question, qui est un polyfill pour les Transitions CSS sous IE. Vous pourriez vouloir essayer.
  • J'ai regardé du papier de verre, mais je préfère éviter une dépendance, c'est pourquoi je suis à la recherche pour obtenir ce code.
  • Juste assez. La raison pour laquelle il vaut la peine, c'est parce que ce ne serait qu'une dépendance pour IE9, et d'autres navigateurs pourront utiliser de vrais CSS transforme (avec toutes les prestations les prestations qui vont avec). Si vous écrivez un manuel de jQuery animation, vous serez à punir les autres navigateurs pour IE manque de soutien. Et vous auriez une dépendance de toute façon (sur votre propre code jQuery). Si vous êtes sûr que vous ne souhaitez pas l'utiliser, c'est assez juste, mais c'est un bon outil.
  • est la réponse à votre question? Puis marquez-le comme il est 😉
  • J'ai été manger. Merci beaucoup!!

InformationsquelleAutor frenchie | 2013-03-03