jquery.animate와 CSS 회전 크로스 브라우저 ()

해결법

1.CSS-변환은 아직, jQuery를 함께 애니메이션 할 수 없습니다. 당신이 뭔가를 할 수 있습니다 :

CSS-변환은 아직, jQuery를 함께 애니메이션 할 수 없습니다. 당신이 뭔가를 할 수 있습니다 :
```
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)'
            });
        }
    });
}
```
현재 단계 - 콜백에 대한 자세한 내용을보실 수 있습니다 : http://api.jquery.com/animate/#step

http://jsfiddle.net/UB2XR/23/

그리고, BTW : 당신은 필요가 없습니다에 접두사 CSS3 변환과 jQuery를 1.7+

당신은 좀 더 쉽게 당신의 인생을 만들기 위해 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);
```
http://jsbin.com/ofagog/2/edit

나는 완화, 기간 및 전체 미미의 순서를 만들기 위해 그것을 조금 최적화.
```
$.fn.animateRotate = function(angle, duration, easing, complete) {
  var args = $.speed(duration, easing, complete);
  var step = args.step;
  return this.each(function(i, e) {
    args.complete = $.proxy(args.complete, e);
    args.step = function(now) {
      $.style(e, 'transform', 'rotate(' + now + 'deg)');
      if (step) return step.apply(e, arguments);
    };

    $({deg: 0}).animate({deg: angle}, args);
  });
};
```
전체 콜백에서이 컨텍스트에 문제를 지적 마테오에게 감사드립니다. 경우 각 노드 jQuery.proxy으로 콜백을 결합하여 고정.

나는 업데이트 2에서 전에 코드 버전을 추가했습니다.

당신이 회전 앞뒤로 토글 식으로 뭔가를하려는 경우 가능한 수정합니다. 나는 단순히 함수에 시작 매개 변수를 추가하고이 라인을 교체 :
```
$({deg: start}).animate({deg: angle}, args);
```
누군가가 시작 학위를 설정할지 여부를, 모든 사용 사례에 대해이 더 일반적인 만드는 방법을 알고있는 경우, 적절한 편집을 확인하십시오.

주로 당신이 원하는 결과에 도달하는 방법은 두 가지를했습니다. 그러나 처음에,의는 인수에 대해 살펴 보겠습니다 :

jQuery.fn.animateRotate (각도, 시간, 완화, 완료)

"각도"의 경우를 제외하고 그들 모두는 선택 및 대체 기본 jQuery.fn.animate-특성에 있습니다 :
```
duration: 400
easing: "swing"
complete: function () {}
```
이 방법은 짧은 하나이지만, 우리가 전달보다 인수 조금 불분명 보인다.
```
$(node).animateRotate(90);
$(node).animateRotate(90, function () {});
$(node).animateRotate(90, 1337, 'linear', function () {});
```
이상의 세 가지 인수가있는 경우이 구문 내의 즐겨 찾기 그래서 나는, 사용 목적에 선호 :
```
$(node).animateRotate(90, {
  duration: 1337,
  easing: 'linear',
  complete: function () {},
  step: function () {}
});
```

2.감사합니다 yckart! 위대한 기여. 나는 좀 더 플러그인을 구체화. 전체 제어 및 크로스 브라우저 CSS에 대한 startAngle로부터 추가되었습니다.

감사합니다 yckart! 위대한 기여. 나는 좀 더 플러그인을 구체화. 전체 제어 및 크로스 브라우저 CSS에 대한 startAngle로부터 추가되었습니다.

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

        $({deg: startAngle}).animate({deg: endAngle}, {
            duration: duration,
            easing: easing,
            step: function(now){
                elem.css({
                  '-moz-transform':'rotate('+now+'deg)',
                  '-webkit-transform':'rotate('+now+'deg)',
                  '-o-transform':'rotate('+now+'deg)',
                  '-ms-transform':'rotate('+now+'deg)',
                  'transform':'rotate('+now+'deg)'
                });
            },
            complete: complete || $.noop
        });
    });
};

3.당신이 jQuery를 통해 CSS3 애니메이션을 취급하는 경우 jQuery를 교통은 아마 당신의 인생을 더 쉽게 만들 것입니다.

당신이 jQuery를 통해 CSS3 애니메이션을 취급하는 경우 jQuery를 교통은 아마 당신의 인생을 더 쉽게 만들 것입니다.

2014 EDIT 월

4.IE7 +을 포함하여이 크로스 브라우저를 수행하려면, 당신은 변환 행렬과 플러그인을 확장해야합니다. 공급 업체 접두사가 JQuery와-1.8 +에서 jQuery를에 이루어지기 때문에 나는 변환 속성이을 떠날 것이다.

IE7 +을 포함하여이 크로스 브라우저를 수행하려면, 당신은 변환 행렬과 플러그인을 확장해야합니다. 공급 업체 접두사가 JQuery와-1.8 +에서 jQuery를에 이루어지기 때문에 나는 변환 속성이을 떠날 것이다.

$.fn.animateRotate = function(endAngle, options, startAngle)
{
    return this.each(function()
    {
        var elem = $(this), rad, costheta, sintheta, matrixValues, noTransform = !('transform' in this.style || 'webkitTransform' in this.style || 'msTransform' in this.style || 'mozTransform' in this.style || 'oTransform' in this.style),
            anims = {}, animsEnd = {};
        if(typeof options !== 'object')
        {
            options = {};
        }
        else if(typeof options.extra === 'object')
        {
            anims = options.extra;
            animsEnd = options.extra;
        }
        anims.deg = startAngle;
        animsEnd.deg = endAngle;
        options.step = function(now, fx)
        {
            if(fx.prop === 'deg')
            {
                if(noTransform)
                {
                    rad = now * (Math.PI * 2 / 360);
                    costheta = Math.cos(rad);
                    sintheta = Math.sin(rad);
                    matrixValues = 'M11=' + costheta + ', M12=-'+ sintheta +', M21='+ sintheta +', M22='+ costheta;
                    $('body').append('Test ' + matrixValues + '<br />');
                    elem.css({
                        'filter': 'progid:DXImageTransform.Microsoft.Matrix(sizingMethod=\'auto expand\','+matrixValues+')',
                        '-ms-filter': 'progid:DXImageTransform.Microsoft.Matrix(sizingMethod=\'auto expand\','+matrixValues+')'
                    });
                }
                else
                {
                    elem.css({
                        //webkitTransform: 'rotate('+now+'deg)',
                        //mozTransform: 'rotate('+now+'deg)',
                        //msTransform: 'rotate('+now+'deg)',
                        //oTransform: 'rotate('+now+'deg)',
                        transform: 'rotate('+now+'deg)'
                    });
                }
            }
        };
        if(startAngle)
        {
            $(anims).animate(animsEnd, options);
        }
        else
        {
            elem.animate(animsEnd, options);
        }
    });
};

참고 : 당신은 단지 옵션 startAngle로부터 사용 {}는 null을 설정해야하는 경우 매개 변수 옵션과 startAngle로부터는 선택 사항입니다.

사용 예제 :

var obj = $(document.createElement('div'));
obj.on("click", function(){
    obj.stop().animateRotate(180, {
        duration: 250,
        complete: function()
        {
            obj.animateRotate(0, {
                duration: 250
            });
        }
    });
});
obj.text('Click me!');
obj.css({cursor: 'pointer', position: 'absolute'});
$('body').append(obj);

또한 데모이 jsfiddle을 참조하십시오.

업데이트 : 당신은 이제 추가로 전달할 수 있습니다 : {} 옵션에. 이것은 동시에 다른 애니메이션을 실행할 당신이 수 할 것입니다. 예를 들면 :

obj.animateRotate(90, {extra: {marginLeft: '100px', opacity: 0.5}});

이 요소를 90도 회전하고 100 픽셀로 오른쪽으로 이동하고 애니메이션 동안 동시에 모두가 반투명하게됩니다.

5.이 내 솔루션입니다 :

이 내 솔루션입니다 :

var matrixRegex = /(?:matrix\(|\s*,\s*)([-+]?[0-9]*\.?[0-9]+(?:[e][-+]?[0-9]+)?)/gi;

var getMatches = function(string, regex) {
    regex || (regex = matrixRegex);
    var matches = [];
    var match;
    while (match = regex.exec(string)) {
        matches.push(match[1]);
    }
    return matches;
};

$.cssHooks['rotation'] = {
    get: function(elem) {
        var $elem = $(elem);
        var matrix = getMatches($elem.css('transform'));
        if (matrix.length != 6) {
            return 0;
        }
        return Math.atan2(parseFloat(matrix[1]), parseFloat(matrix[0])) * (180/Math.PI);
    }, 
    set: function(elem, val){
        var $elem = $(elem);
        var deg = parseFloat(val);
        if (!isNaN(deg)) {
            $elem.css({ transform: 'rotate(' + deg + 'deg)' });
        }
    }
};
$.cssNumber.rotation = true;
$.fx.step.rotation = function(fx) {
    $.cssHooks.rotation.set(fx.elem, fx.now + fx.unit);
};

당신은 기본 애니메이션의 FKT에서 사용할 수 있습니다 :

//rotate to 90 deg cw
$('selector').animate({ rotation: 90 });

//rotate to -90 deg ccw
$('selector').animate({ rotation: -90 });

//rotate 90 deg cw from current rotation
$('selector').animate({ rotation: '+=90' });

//rotate 90 deg ccw from current rotation
$('selector').animate({ rotation: '-=90' });

6.또 다른 대답은, 때문에 jQuery.transit은 jQuery.easing와 호환되지 않습니다. 이 솔루션은 jQuery를 확장으로 제공됩니다. 회전이 특정 케이스이며,보다 일반적인이다 :

또 다른 대답은, 때문에 jQuery.transit은 jQuery.easing와 호환되지 않습니다. 이 솔루션은 jQuery를 확장으로 제공됩니다. 회전이 특정 케이스이며,보다 일반적인이다 :
```
$.fn.extend({
    animateStep: function(options) {
        return this.each(function() {
            var elementOptions = $.extend({}, options, {step: options.step.bind($(this))});
            $({x: options.from}).animate({x: options.to}, elementOptions);
        });
    },
    rotate: function(value) {
        return this.css("transform", "rotate(" + value + "deg)");
    }
});
```
사용법은 간단하다 :
```
$(element).animateStep({from: 0, to: 90, step: $.fn.rotate});
```

7.setInterval을 함께 크로스 브라우저 플러그인없이 :

setInterval을 함께 크로스 브라우저 플러그인없이 :

                        function rotatePic() {
                            jQuery({deg: 0}).animate(
                               {deg: 360},  
                               {duration: 3000, easing : 'linear', 
                                 step: function(now, fx){
                                   jQuery("#id").css({
                                      '-moz-transform':'rotate('+now+'deg)',
                                      '-webkit-transform':'rotate('+now+'deg)',
                                      '-o-transform':'rotate('+now+'deg)',
                                      '-ms-transform':'rotate('+now+'deg)',
                                      'transform':'rotate('+now+'deg)'
                                  });
                              }
                            });
                        }

                        var sec = 3;
                        rotatePic();
                        var timerInterval = setInterval(function() {
                            rotatePic();
                            sec+=3;
                            if (sec > 30) {
                                clearInterval(timerInterval);
                            }
                        }, 3000);

from https://stackoverflow.com/questions/15191058/css-rotation-cross-browser-with-jquery-animate by cc-by-sa and MIT license

'JQUERY' 카테고리의 다른 글

[JQUERY] jQuery를에 CSV로 내보내기 (0)	2020.10.25
[JQUERY] jQuery를 함께 요소를 가리키면 경우 감지 (0)	2020.10.25
[JQUERY] jQuery를 UI 자동 완성 검색 구성을 위젯 (0)	2020.10.25
[JQUERY] 어떻게 jQuery를 사용하여 여러 선택 상자의 값을 얻으려면? (0)	2020.10.25
[JQUERY] HTML5 : 정수만을 취 번호 입력 형? (0)	2020.10.25

복붙노트

[JQUERY] jquery.animate와 CSS 회전 크로스 브라우저 ()

jquery.animate와 CSS 회전 크로스 브라우저 ()

해결법

1.CSS-변환은 아직, jQuery를 함께 애니메이션 할 수 없습니다. 당신이 뭔가를 할 수 있습니다 :

2.감사합니다 yckart! 위대한 기여. 나는 좀 더 플러그인을 구체화. 전체 제어 및 크로스 브라우저 CSS에 대한 startAngle로부터 추가되었습니다.

3.당신이 jQuery를 통해 CSS3 애니메이션을 취급하는 경우 jQuery를 교통은 아마 당신의 인생을 더 쉽게 만들 것입니다.

4.IE7 +을 포함하여이 크로스 브라우저를 수행하려면, 당신은 변환 행렬과 플러그인을 확장해야합니다. 공급 업체 접두사가 JQuery와-1.8 +에서 jQuery를에 이루어지기 때문에 나는 변환 속성이을 떠날 것이다.

5.이 내 솔루션입니다 :

6.또 다른 대답은, 때문에 jQuery.transit은 jQuery.easing와 호환되지 않습니다. 이 솔루션은 jQuery를 확장으로 제공됩니다. 회전이 특정 케이스이며,보다 일반적인이다 :

7.setInterval을 함께 크로스 브라우저 플러그인없이 :

'JQUERY' 카테고리의 다른 글

티스토리툴바