jquery animate在点击时多次旋转div

Question

我想使用动画（不是旋转，没有插件）旋转此div，还可以设置它可以旋转的次数。这是代码

＆＃13;

＆＃13;

$('#foo').animate({  borderSpacing: -90 }, {
    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:'slow'
},'linear');

＆＃13;

body {
    font-family: sans-serif;
}

#foo {
    width:100px;
    height:100px;
    position:absolute;
    top:100px;
    left:100px; 
    border-spacing: 0;
    background-color:red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="foo">Text</div>
<p>See <a href="http://jsfiddle.net/ryleyb/ERRmd/">inspiration</a>

＆＃13;

＆＃13;

＆＃13;

Answer 1

这是解决方案snipet。希望你喜欢它。

$('#act').on('click',function(){
    $(this).animate({  borderSpacing: -90 }, {
        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:'slow'
    },'linear');
});

body {
    font-family: sans-serif;
}

#act {
    width:100px;
    height:100px;
    position:absolute;
    top:100px;
    left:100px; 
    border-spacing: 0;
    background-color:red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="act">Text</div>
<p>See <a href="http://jsfiddle.net/ryleyb/ERRmd/">inspiration</a>

希望这能满足您的要求。

问候！

Answer 2

第一：您需要使用deg代替borderSpacing以避免每次重置

第二：我创建两个函数，一个用于旋转，另一个用于重置旋转

第三次：添加data属性以捕获angle及其中的更改

下一个代码/评论将解释这些步骤：请仔细阅读有关代码的评论

＆＃13;

＆＃13;

$(document).ready(function(){
  $('#foo').on('click' , function(){ // element click event
    var rotate_deg = parseInt($(this).data('rotate')); // get the data-rotate attribute in this case will return -90 change it on html if you like
    var next_rotation_angle = rotate_deg - 90; //for a new rotation angle .. in this case I use rotate_deg * 2 change it as you like
    var Times = 3; // how many rotate available
    if(rotate_deg / 90 >= -Times){
      RotateIt($(this) , rotate_deg); // run a function to rotate the element 
      $(this).data('rotate' , next_rotation_angle); // append a new angle to data-rotate attribute
    }else{alert('Can not click any more')}
  });
  $('#reset_rotation').on('click' , function(){ // reset button click event
    ResetRotate($('#foo')); // reset the element rotation to 0
    $('#foo').data('rotate' , '-90');
  });
});
//function to rotate .. use this code to rotate any element you need by using RotateIt(element , rotate_deg);
function RotateIt(el , deg){
  $(el).stop().animate({deg: deg}, {
      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:'slow'
  },'linear');
}
// function to reset the rotate .. while deg here is 0 no need to set deg as an argument 
function ResetRotate(el){
  $(el).stop().animate({deg: 0}, {
      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:'slow'
  },'linear');
}

＆＃13;

body {
    font-family: sans-serif;
}

#foo {
    width:100px;
    height:100px;
    position:absolute;
    top:100px;
    left:100px; 
    border-spacing: 0;
    background-color:red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="foo" data-rotate="-90">Text</div>
<p>See <a href="http://jsfiddle.net/ryleyb/ERRmd/">inspiration</a>
<button id="reset_rotation">Reset Rotation</button>

＆＃13;

＆＃13;

＆＃13;