我在页面中有一个div,它已经通过css" transform:rotate(60deg)"旋转到60degree。我想旋转和动画角度变量中的值,从它开始动画的当前度,即60度。
<script type="text/javascript">
var angle = 0;
$(document).ready(function () {
$('#rotate').click(function () {
angle += 90;
$('#div1').animate({ rotate: angle }, {
step: function (now, fx) {
$(this).css('-webkit-transform', 'rotate(' + now + 'deg)');
$(this).css('-moz-transform', 'rotate(' + now + 'deg)');
$(this).css('transform', 'rotate(' + now + 'deg)');
},
duration: 3000
}, 'linear');
});
});
</script>
<style type="text/css">
#div1
{
width: 100px;
height: 100px;
position: absolute;
top: 100px;
left: 100px;
border-spacing: 0;
background-color: red;
transform:rotate(60deg);
}
</style>
<div id="div1">
Text</div>
<div id="rotate" > Rotate</div>
它会旋转并设置动画,但会先将div重置为默认位置。请帮忙。 谢谢。
答案 0 :(得分:1)
这是一个跨浏览器的工作小提琴: http://jsfiddle.net/tNLSL/
var angle = 60;
$(document).ready(function () {
var start = 60;
var end = start + 90;
$('#rotate').click(function () {
$('#div1').animateRotate(start,end);
start = end;
end = end +90;
});
});
$.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
});
});
};
答案 1 :(得分:0)
尝试使用此Example fiddle
CSS
#div1
{
width: 100px;
height: 100px;
position: absolute;
top: 100px;
left: 100px;
border-spacing: 0;
background-color: red;
transform:rotate(60deg);
-webkit-transform:rotate(60deg);
-moz-transform:rotate(60deg);
}
JS
var angle = 60;
$(document).ready(function () {
$('#rotate').click(function () {
angle += 90;
$('#div1').animate({ rotate: angle }, {
step: function (now, fx) {
$(this).css('-webkit-transform', 'rotate(' + now + 'deg)');
$(this).css('-moz-transform', 'rotate(' + now + 'deg)');
$(this).css('transform', 'rotate(' + now + 'deg)');
},
duration: 3000
}, 'linear');
});
});