CSS旋转浏览器与jquery.animate（） [英] CSS rotation cross browser with jquery.animate()
问题描述
我正在开发一个跨浏览器兼容旋转（ie9 +），我在 jsfiddle 中有以下代码
$（document）.ready（function（）{
DoRotate（30）;
AnimateRotate 30）;
}）;
函数DoRotate（d）{
$（＃MyDiv1）。css（{
'-moz-transform'：'rotate 'deg）'，
'-webkit-transform'：'rotate（'+ d +'deg）'，
'-o-transform'：'rotate（'+ d +'deg）'，
'-ms-transform'：'rotate（'+ d +'deg）'，
'transform'：'rotate（'+ d +'deg）'
}
}
函数AnimateRotate（d）{
$（＃MyDiv2）。animate（{
'-moz-transform'：' rotate（'+ d +'deg）'，
'-webkit-transform'：'rotate（'+ d +'deg）'，
'
'，
'-ms-transform'：'rotate（'+ d +'deg）'，
'transform'：'rotate（'+ d +'deg）'
} 1000）;
}
CSS和HTML非常简单，只是为了演示：
.SomeDiv {
width：50px;
height：50px;
margin：50px 50px;
background-color：red;}
< div id =MyDiv1class =SomeDiv> test< / div>
< div id =MyDiv2class =SomeDiv> test< / div>
使用 .css（）但不是当使用 .animate（）;为什么，是否有办法修复它？
谢谢。
CSS-Transforms不可能用jQuery做动画。你可以这样做：
function AnimateRotate（angle）{
//缓存对象的性能原因
var $ elem = $（'＃MyDiv2'）;
//我们使用一个伪对象作为动画
//（从'0'到'angle'开始），你可以命名为
$（{ deg：0}）。animate（{deg：angle}，{
duration：2000，
step：function（now）{
// in the step-callback步骤动画），
//你可以使用`now'参数，它包含当前的
// animation-position（`0`到`angle`）
$ elem。 css（{
transform：'rotate（'+ now +'deg）'
}）;
}
}）;
}
您可以在这里阅读更多关于步骤回调的信息：http://api.jquery.com/animate/#step
< a href =http://jsfiddle.net/UB2XR/23/> http://jsfiddle.net/UB2XR/23/
，btw：您不需要使用jQuery 1.7 +
更新
前缀css3转换您可以这在一个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
Update2
有点使顺序， duration 和完成无关紧要。
$。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）;
}）;
};
更新2.1
href =http://stackoverflow.com/questions/15191058/css-rotation-cross-browser-with-jquery-animate/15191130?noredirect=1#comment37890839_15191130> matteo 谁注意到一个问题与此 -context在完整 - 回调。如果通过绑定在每个节点上使用 jQuery.proxy 的回调来修复它。
我已在更新2 之前将版本添加到代码中。
sup> ...很简单！
主要有两种方法可以达到想要的结果。但首先，让我们来看看参数：
jQuery.fn.animateRotate（angle，duration，easing，complete） code>
除了angle，它们都是可选的，并且默认为 jQuery.fn.animate -properties：
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（）{}
}
I'm working on creating a cross-browser compatible rotation (ie9+) and I have the following code in a 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);
}
The CSS and HTML are really simple and just for demo:
.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>
The rotation works when using .css() but not when using .animate(); why is that and is there a way to fix it?
Thanks.
CSS-Transforms are not possible to animate with jQuery, yet. You can do something like this:
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)'
});
}
});
}
You can read more about the step-callback here: http://api.jquery.com/animate/#step
And, btw: you don't need to prefix css3 transforms with jQuery 1.7+
Update
You can wrap this in a jQuery-plugin to make your life a bit easier:
$.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
Update2
I optimized it a bit to make the order of easing, duration and complete insignificant.
$.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);
});
};
Update 2.1
Thanks to matteo who noted an issue with the this-context in the complete-callback. If fixed it by binding the callback with jQuery.proxy on each node.
I've added the edition to the code before from Update 2.
The Usage...is quite simple!
Mainly you've two ways to reach the desired result. But at the first, let's take a look on the arguments:
jQuery.fn.animateRotate(angle, duration, easing, complete)
Except of "angle" are all of them optional and fallback to the default jQuery.fn.animate-properties:
duration: 400
easing: "swing"
complete: function () {}
1st
This way is the short one, but looks a bit unclear the more arguments we pass in.
$(node).animateRotate(90);
$(node).animateRotate(90, function () {});
$(node).animateRotate(90, 1337, 'linear', function () {});
2nd
I prefer to use objects if there are more than three arguments, so this syntax is my favorit:
$(node).animateRotate(90, {
duration: 1337,
easing: 'linear',
complete: function () {},
step: function () {}
});
这篇关于CSS旋转浏览器与jquery.animate（）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
