用于旋转对象的jQuery回调函数

Question

我无法弄清楚如何为这个CSS动画添加回调函数。

JSFiddle

HTML

<button>Rotate</button><br><br>
<div></div>

CSS

div {
    height:40px;
    width:40px;
    background-color: grey;
}

JS

$(document).ready(function(){
  $("button").click(function(){
      $("div").animate({textIndent: "-=90"}, 
          {step: function(now,fx)
           {$(this).css('-webkit-transform','rotate('+now+'deg)')},duration:'slow'},
       'linear')
    })
})

Answer 1

使用complete option。

$(document).ready(function(){
  $("button").click(function(){
      $("div").animate({textIndent: "-=90"}, 
          {step: function(now,fx)
           {$(this).css('-webkit-transform','rotate('+now+'deg)')},duration:'slow',complete:function(){alert("hi");}},
       'linear')
    })
})

更新了小提琴：http://jsfiddle.net/H2g74/1/

Answer 2

您可以使用css动画，并使用相同的持续时间调用回调：

的javascript

$(document).ready(function(){

    var now = -90;
  $("button").click(function(){
      $("div").css('-webkit-transform', 'rotate('+now+'deg)');
      now -= 90;
      window.setTimeout(callback, 1000);
    });
})

function callback() {
 alert('callback func');   
}

CSS

div {
    height:40px;
    width:40px;
    background-color: grey;
     -webkit-transition:all 1s ease;
    transition:all 1s ease;
}

工作样本： http://jsfiddle.net/EVdjx/