Question

var div = $("div");

one(),two(),three()

function one() {div.css("background", "#f00").hide().fadeIn(1000)};
function two() {div.css("background", "#ff0").hide().fadeIn(1000)};
function three() {div.css("background", "#000").hide().fadeIn(1000)};

http://jsfiddle.net/aLPLn/

任何插件，如

$.stepz(one(),1);
$.stepz(two(),2);
$.stepz(three(),3);

???

Answer 1

css和hide都会立即执行，因此您无需等待任何内容。另一方面，fadeIn需要一些时间来完成，所以这就是你想要等待的。您可以传递动画完成时调用的回调函数：

var div = $("div");

function one() {div.css("background", "#f00").hide().fadeIn(1000, two)};
function two() {div.css("background", "#ff0").hide().fadeIn(1000, three)};
function three() {div.css("background", "#000").hide().fadeIn(1000)};

one();

http://jsfiddle.net/ckC9d/

Answer 2

所有jQuery动画方法都提供了一个称为“回调”函数的函数，该函数在动画结束时执行。在持续时间之后立即指定。您可以使用它来链接动画，如：

function one() {div.css("background", "#f00").hide().fadeIn(1000, two)};
function two() {div.css("background", "#ff0").hide().fadeIn(1000, three)};
function three() {div.css("background", "#000").hide().fadeIn(1000, one)};

one(); //this will start a never-ending loop

例如，请参阅this doc。

任何步骤1,2,3 ....功能的最佳方法？

2 个答案: