jquery一个接一个地运行函数

据我所知，您希望按顺序对多个元素执行事件。只要稍微玩一玩，我们就可以利用jQuery的Deferred，并制定一个解决方案（查看JSFiddle），例如：

function runDeferred() {
    var args = arguments;
    if(args.length) {
        var next = Array.prototype.shift.call(args);
        $.when(next()).done(function() {
            runDeferred.apply(this, args);
        });
    }

这个方法可以获取一个方法列表，并连续调用它们。方法本身需要返回我们希望等待的元素的jQuery对象。下面是这样一个方法的例子：

function fadeBar() {
    return $("#bar").fadeIn(1000).animate({
        "font-size": "2em"
    }, 1000);
}

以下是如何组合它们：

runDeferred(fadeFoo, fadeBar, fadeZulu);

研究方法链接。这在过去对我很有效。

http://schier.co/post/method-chaining-in-javascript

回调应该可以工作。我不太确定你想做什么，但你似乎在说你想一个接一个地跑。

function hides(callback){
  $('#whiteLogo').hide('600', function(){
    $('div.form').hide('600', function(){
        if (callback){
            callback();
        }
    });
  });
}
function moveTop(callback){
  $('nav').animate({
    'bottom': 'initial',
    'top': '0px'
  }, 600, function(){
      $('.gradient').animate({
        'bottom': 'initial',
        'top': '-10px'
      }, 600, function(){
          if (callback){
              callback();
          }
      });
  });
}
function destroys(callback){
  $('.gradient').hide(function(){
      if (callback){
          callback();
      }
  });
}

//I have never used after but I'm sure it's similar to the callback structure above.
function content(){
  $('header').after('<section id=''content''>'t<div id=''icons''>'t</div>'t<section id=''summary''>'t't't</section>'t<section id=''bulletin''>'t't</section></section>');
}

回调可以这样使用。

hides(function(){
   doSomething();
});

您没有分享有关如何调用函数的信息。jQuery上的所有动画函数在完成时都有回调。要在动画完成时调用其他函数，可以使用以下代码。

function hides(){
    $('#whiteLogo').hide(600);
    $('div.form').hide(600, moveTop);
}
function moveTop(){
    $('nav').animate({
        'bottom': 'initial',
        'top': '0px'
    }, 600);
    $('.gradient').animate({
        'bottom': 'initial',
        'top': '-10px'
    }, 600, destroys);
}
function destroys(){
    $('.gradient').hide(600, content);
}
function content(){
    $('header').after('<section id=''content''>'t<div id=''icons''>'t</div>'t<section id=''summary''>'t't't</section>'t<section id=''bulletin''>'t't</section></section>');
}

这样，当你调用hide（）时，你会有一个接一个的回调链。正如你所看到的，我只检查每个函数的一个动画，因为它们被限制在相同的执行时间内（Ex.hides（）有两个600毫秒的动画，所以我认为如果一个已经完成，另一个也应该完成）。

请注意，这段代码可以在事件驱动模式中进行重构，如果你问我，请考虑某种更好的设计模式。

还可以查看jQuery的文档http://api.jquery.com/animate/

编辑、更新

使用.queue（），如Mottie 所建议

   function hides(){
      $('#whiteLogo').hide(600);
        $('div.form').hide(600, d);
    };
    function moveTop() {
      $('nav').animate({
        'bottom': 'initial',
        'top': '0px'
      }, 600);
      $('.gradient').animate({
        'bottom': 'initial',
        'top': '-10px'
      }, 600, d);
    };
    function destroys() {
        $('.gradient').hide(600, d);
    };
    function content() {
        $('header').after('<section style=background:blue id=''content''>'
        + ''t<div id=''icons''>'t</div>'t<section id=''summary''>'
        + ''t't't</section>'t<section id=''bulletin''>'
        + ''t't</section>section</section>');
    };
$("body").queue("animations", [hides, moveTop, destroys, content]);
var d = function() {
  return $("body").dequeue("animations")
};
hides()

http://jsfiddle.net/guest271314/0Lx4t54y/