Question

jquery animate方法是否有onStart回调。我知道完整的回调，但没有看到任何地方使用其他回调，如onStart或初始化。

我想要onStart回调，因为当我调用animate（）时，它可能无法立即启动，但由于之前的动画未完成而排队。

Answer 1

我过去曾使用过这种方法，但它看起来效果很好。希望它能为你效劳。

编辑（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设置）。

所以无论如何，你在开始时设置一个变量，如果它没有设置，那么你第一次知道它...即它被初始化。

DEMO：Example of jQuery animate onStart callback

Answer 2

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

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

Answer 3

启动动画时启动

function onStart(){
   $('.box').animate({left:100},500,onComplete())
}
function onStart()

Answer 4

简单方法

我不是很有经验，但这是要走的路。

只需在动画之前插入css方法。

像这样：

$(this).css({ "display": "block", "opacity": "0" })
        .animate({ "opacity": "1" }, 200);

Answer 5

调用animate方法后，它将在您的其他JavaScript代码运行时运行。因此，具有onStart回调的等价物将是在animate方法之后立即运行您想要运行的代码。此外，还有一个“步骤”功能，您可以使用.. http://api.jquery.com/animate/#step ..我还没有使用它，但似乎您可以检查您正在使用的初始CSS值，并且只执行基于代码的在那。如果您要为很多部分制作动画，可能会出现性能问题。

jquery animate onStart回调

5 个答案: