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

所以我认为这应该很简单，但是我不确定我缺少什么。我有一个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/

感谢您的帮助

最佳答案

将nextGame()更改为nextGame：

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

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

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

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