jquery动画onStart回调

Question

jquery动画方法是否有onStart回调。我知道完整的回调，但没有看到任何地方可以使用其他回调，如onStart或initialize。

我想要动画回调，因为当我调用onStart ()时，它可能不会立即开始，而是由于之前的动画没有完成而排队。

Answer 1

一旦您调用了animate方法，它就会在您的其他javascript代码运行的同时运行。因此，等效于使用onStart回调，就是将您想要运行的代码立即放在动画方法之后。此外，您还可以使用一个'step‘函数。http://api.jquery.com/animate/#step ..我还没有用过它，但似乎你可以检查你正在处理的初始CSS值，并且只根据它来执行代码。但是，如果你要对很多部分进行动画处理，这可能会是一个性能问题。

Answer 2

我在过去使用过这种方法，它似乎工作得很好。希望它能为你工作。

编辑(2016/12/06 - OP请求的更好示例)

HTML：

<div class="tile">X</div>

CSS：

body {
  position: relative;
}

.tile {
  position: absolute;
  display: block;
  padding: 20px;
  background: aqua;
  text-align: center;
  font-size: 32px;
  font-family: sans-serif;
}

JavaScript：

function doMe() {
  console.log('We called a callback function!');
}

$('#tiles .tile').animate({
  'left': '+=500px'
}, {
  duration: 6000,
  step: function(now, fx) {
    var data = $(this).data('anistart');
    if (!data) {
      console.log('We started!');
      $(this).data('anistart', {
        start: fx.start,
        end: fx.end
      });
      doMe();
    }
    console.log('We\'re stepping...');
  },
  complete: function() {
    var data = $(this).data('anistart');
    if (data.end !== parseFloat($(this).css('left'))) {
      $(this).css('left', data.end);
    }
    $(this).removeData('anistart');
    console.log('We ended!');
  }
});

在step函数上，我测试对象是否有预先设置的数据。如果不是，我设置它，然后我们可以调用/处理任何东西(例如，你的回调)

在完整的函数上，我确保位置是它应该的位置，如果不是，我设置它。您很可能会取消测试并设置它，但不确定哪一个对性能的影响更大(检查或css集)。

所以不管是什么情况，你在start上设置一个变量，如果它没有设置，那么你就知道它是第一次……即它正在被初始化。

演示：Example of jQuery animate onStart callback

Answer 3

.animation()具有未记录的start选项

$('.box').animate({left:100},{
    duration:500,
    start:function(){
        console.log('start');
    },
    complete:function(){
        console.log('end');
    }
});