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();

在回调中使用nextGame()会在执行上述行时立即调用该函数，而不是在fadeIn完成后传递要调用的函数。

Answer 3

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

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

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

3 个答案: