jQuery.animate()? ??? ??? ???? CSS ??

??? ???? ?? ??? ????? ? ? jQuery? .animate()? ?? ? ???? ???? ?????. ??. CSS ??? ?? ?? ??? ????? ????? ??? ???? ?????. ? ????? .animate()? ???? ??? ???? ?? ???? ? ???? ???? ???? ???? ??? ?????.

??

?? ?? ??? ?????.

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

? ??? .css()? ???? ID? ??"MyDiv1"? ??? ????? ????? ?? ? ??? ???? ????. "MyDiv2"? .animate(). ??? ??? CSS-Transform? ????? jQuery? ???? ?????? ???? ?? ??? ?????.

???

jQuery? CSS-Transform? ????????? .animate() ???? ???? ?? ??? ??? ? ????. ?? ?? ??:

function AnimateRotate(angle) {
    // caching the object for performance reasons
    var $elem = $('#MyDiv2');

    // we use a pseudo object for the animation
    // (starts from `0` to `angle`), you can name it as you want
    $({deg: 0}).animate({deg: angle}, {
        duration: 2000,
        step: function(now) {
            // in the step-callback (that is fired each step of the animation),
            // you can use the `now` paramter which contains the current
            // animation-position (`0` up to `angle`)
            $elem.css({
                transform: 'rotate(' + now + 'deg)'
            });
        }
    });
}

? ?????? ?? ??? 0??? ??? ???? ????????. ? ?????? ? ??? ??? CSS ?? ??? ?????? ??? ?? ?? ??? ????? ??????.

jQuery ????

????? ????? ?? ??? ????? jQuery ????? ??? ? ????. ?????:

$.fn.animateRotate = function(angle, duration, easing, complete) {
  return this.each(function() {
    var $elem = $(this);

    $({deg: 0}).animate({deg: angle}, {
      duration: duration,
      easing: easing,
      step: function(now) {
        $elem.css({
           transform: 'rotate(' + now + 'deg)'
         });
      },
      complete: complete || $.noop
    });
  });
};

???:

$('#MyDiv2').animateRotate(90);

? ????? ??? ??? ?????.

??

jQuery? .animate() ??? ??? ?? ??? ???? ?? CSS-Transforms? ???? ??? ?? ???? ? ???? ?? ?????? ??? ? ????. ? ??? ???? CSS ??? ????? ???? ?? ?? ??????? ??? ??? ?????.

? ??? jQuery? .animate() ???? ???? ???? ? ?? ??? CSS ?? ?????? ??? ?? ? ?????? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!