我有四个功能，包括jQuery动画和东西。我希望他们在另一个完成后立即运行。我看了很多问题和答案，我尝试了很多东西（延期，承诺，回调等），但没有运气。通常结果是它们是否同时工作，或者第二个不能运行。任何想法如何按顺序运行它们？
以下是我的功能：
function hides(){
$('#whiteLogo').hide('600');
$('div.form').hide('600');
}
function moveTop(){
$('nav').animate({
'bottom': 'initial',
'top': '0px'
}, 600);
$('.gradient').animate({
'bottom': 'initial',
'top': '-10px'
}, 600);
}
function destroys(){
$('.gradient').hide();
}
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>');
}
更新 我不认为这与此有关，但根据要求，这是我的HTML：
<header>
<nav>
<a href='#' class='linkPicture left'>
<img src='../img/incnetWhite.png' alt='incnetWhite' id='headerLogo'>
</a>
<a href='../checkin/index.php' class='linkWord left' id='checkinLink'>
Checkin
</a>
<a href='../weekend/index.php' class='linkWord left' id='weekendLink'>
Weekend Departures
</a>
<a href='../etut/index.php' class='linkWord left' id='etutLink'>
Etut Reservations
</a>
<div class='linkWord left more' id='moreLink'>
More
<img src='../img/header-drop.png' alt='drop' class='dropimg'>
<div class='dropMenu more' id='moreMenu'>
<a href='../pool/index.php' class='dropWord left' id='poolLink'>
Pool Reservations
</a>
<br>
<a href='../admin/index.php' class='dropWord left' id='adminLink'>
Admin Tools
</a>
</div>
</div>
<div href='#' class='linkWord right personal' id='personalLink'>
Your Name
<img src='../img/header-drop.png' alt='drop' class='dropimg'>
<div class='dropMenu personal' id='personalMenu'>
<a href='../core/settings.php' class='dropWord left' id='settingLink'>
Change Settings
</a>
<br>
<a href='../profiles/edit.php' class='dropWord left' id='profileLink'>
Profile Settings
</a>
<br>
<a href='../core/hiring.php' class='dropWord left' id='hiringLink'>
Apply to INÇNET
</a>
<br>
<a href='../core/about.php' class='dropWord left' id='aboutLink'>
About Us
</a>
<br>
<a href='../core/logoff.php' class='dropWord left' id='logoffLink'>
Sign Out
</a>
</div>
</div>
</nav>
</header>
<div class='form'>
<form method='POST'>
<span id='welcome'>Welcome!</span>
<!--<label class='fieldname' id='username'>Username:</label>-->
<input type='text' name='username' placeholder='username' size='10'>
<br>
<!--<label class='fieldname' id='password'>Password:</label>-->
<input type='password' name='password' placeholder='●●●●●●●●' size='10'>
<br>
<span id='remember'>
<input type='checkbox' name='remember'>
<label class='fildname' id='rememberme'>Remember Me</label>
</span>
<br>
<span id='error'>
</span>
<input type='submit' name='signin' value='Sign In' id='signin'>
</form>
</div>
答案 0 :(得分：2)
据我所知，您希望按顺序执行针对多个元素的事件。通过一些游戏，我们可以利用jQuery的Deferred's并制作解决方案 (view 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);
答案 1 :(得分：0)
查看方法链接。这对我来说过去很有用。
答案 2 :(得分：0)
修改，更新
按照Mottie
的建议使用.queue() 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()
答案 3 :(得分：0)
回调应该有效。我不确定你要做的是什么，但似乎你说你想要一个接一个地跑。
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();
});
答案 4 :(得分：0)
您没有分享有关如何调用这些功能的信息。 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（）有2个600ms的动画，所以我假设如果一个完成，另一个应该也一样）。
请注意，这段代码可以在事件驱动模式中重构，如果你问我 - 想想某种更好的设计模式。
检查jQuery的文档以及http://api.jquery.com/animate/