1

我正在学习 javascript，为此我正在创建一个带有淡入淡出等功能的简单效果库。一切正常，但它不会执行我传入的函数，以便在效果完成时执行。

我得到错误

element[3] is not a function

我的代码：

//add the effect 
jlqAddEffect(document.getElementById("mainBoard"),"fadeout",10,function(){
    alert("done"); //->>>I dont get this executed when the effect is done
});

//EFFECTS
var effectElements=new Array();
function jlqAddEffect(element,type,speed,func)
{
    var effect=[element,type,setInterval(function(){jlqUpdateEffect(effect);},speed),func];//->>Here i pass the function in the 3d element of the array
    effectElements.push(effect);
    jlqInitEffect(effect);
}

function jlqInitEffect(element)
{
    if(element[1]=="fadein")element[0].style.opacity=0;
    if(element[1]=="fadeout")element[0].style.opacity=1;
}
function jlqUpdateEffect(element)
{
    var done=false;
    if(element[1]=="fadein"){
        if(parseFloat(element[0].style.opacity)<1){
            element[0].style.opacity=parseFloat(element[0].style.opacity)+0.01;
        }
        else done=true;
    }
    if(element[1]=="fadeout"){
        if(parseFloat(element[0].style.opacity)>0){
            element[0].style.opacity=parseFloat(element[0].style.opacity)-0.01;
        }
        else done=true;
    }
    if(done){
        alert("effect done");//->>I get this executed when the effect is done
        element[3](); // ->>here it should be calling the function but it gives me the error
        clearInterval(element[2]);
        effectElements.splice(effectElements.indexOf(element),1);
    }
}

编辑： 哦，我现在觉得很傻。问题不在我发布的代码上。我设置了两种效果，一种是在页面加载时，一种是在页面加载时关闭，另一种是在页面加载时我没有传递函数我只是有这个

jlqAddEffect(document.getElementById("mainBoard"),"fadein",10);

而且由于我没有传递函数元素[3]不是函数......

4

1 回答 1

1

在 Chrome 中测试时出现了两个问题：

  • 您在变量初始化为数组之前调用该jlqAddEffect()函数，这会在您尝试. 通过将调用移至代码末尾轻松修复。effectElementseffectElements.push(effect);jlqAddEffect()

  • 你的动画永远不会真正完成，因为 JavaScript 的浮点运算（和/或opacity属性处理中的一些奇怪的东西）阻止了不透明度一直下降到0. 它下降到0.009999999999999247然后被“卡住”。您可以通过测试不透明度是否大于0.01而不是大于来解决此问题0。

演示：http: //jsfiddle.net/nZpSs/1/

于 2013-06-16T12:32:46.283 回答