любой лучший способ шаг 1,2,3 .... функции?

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

См., Например, этот документ .