javascript - jquery .fadein .fadeout 回调嵌套排序不正确

Question

我正在尝试嵌套淡入和淡出方法以获得以下效果。我希望 10 个单独标签中的字符一一淡出，更改文本，然后淡入。根据我对回调函数的了解，以下代码应该实现这一点，但我现在得到的效果是所有元素同时更改，并且文本更改不会等待淡出，导致文本闪烁，然后淡出和淡入。我做错了什么!这是我目前拥有的简化版本。

HTML/PHP:

<?php
echo '<div onclick="addname(this)">';
for ($i=0; i<10; i++){
    echo '<h1 id="temp'.$i.'">Y</h1>';
}
?>

Javascript

function addname(item){
    //Other stuff that works fine
    hideChar(0);
}
function hideChar(i){
    if(i<10){
        var tag = "temp" + i;
        var x = document.getElementById(tag);
        $(x).fadeOut(200, showChar(i));
    }
}
function showChar(i){
    var tag = "temp" + i;
    var x = document.getElementById(tag);
    var j = i+1;
    $(x).html("X");
    $(x).fadeIn(200, hideChar(j));
}

Answer 1

您没有正确地将函数作为回调传递。当您包含 () 时 - 该函数将立即触发 - 省略 () 来传递它:

$(x).fadeOut(200, showChar);

默认参数将被传递。如果您需要默认值以外的其他功能 - 您必须使用匿名函数来调用您的函数:

$(x).fadeOut(200, function() {
    showChar(i)
});