jquery .fadein .fadeout回调嵌套未正确排序

时间:2015-07-20 20:00:04

标签: javascript jquery

我正在尝试嵌套fadein和fadeout方法以获得以下效果。我希望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));
}

1 个答案:

答案 0 :(得分:2)

您未正确传递函数作为回调。当您包含()时 - 该功能将立即触发 - 省略()以传递它:

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

默认参数将被传递。如果你需要的东西不是默认的 - 你必须使用匿名函数来打电话给你:

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