jquery - 在回调中链接 jQuery 动画的问题

Question

所以我认为这应该很简单，但我不确定我错过了什么。我有一个要淡出的 DIV，然后更改一些文本，然后再淡入。

它有点工作，但它会更新文本然后淡出和淡入，尽管我认为我的链接是正确的。

这是基本代码

<div id="box" style="width:300px;height:200px;background-color:yellow">
    <span id="game">Game 1</span>
    <br/>
    <a href="javaScript:ChangeGame()">Next Game</a>
</div>

window.game = 1;

window.ChangeGame = function ()
{
    $("#box")
        .fadeOut(1000, nextGame()).fadeIn();

}

window.nextGame = function() {
    $("#game").text("Game " + game++);
}

这是一个显示问题的jsFiddle

http://jsfiddle.net/mdq6f/4/

感谢您的帮助好心人

Answer 1

更改nextGame()为nextGame：

$("#box")
    .fadeOut(1000, nextGame).fadeIn();

您直接调用该函数，而不仅仅是指向它。

如果您需要提供一些参数，nextGame则需要将其包装到一个匿名函数中：

$("#box")
    .fadeOut(1000, function() { 
        nextGame(/* enter arguments as you wish */); 
    })
    .fadeIn();

Answer 2

利用

$("#box").fadeOut(1000, nextGame).fadeIn();

代替

$("#box").fadeOut(1000, nextGame()).fadeIn();

using nextGame()in callback 在执行上述行时立即调用函数，而不是在fadeIn 完成后传递要调用的函数。

Answer 3

window.ChangeGame = function () {
    $("#box").fadeOut(1000, nextGame).fadeIn(1000);
}

会做你想做的事，并以相同的速度执行淡入和淡出。