淡入/淡出和使用JavaScript创建/隐藏<div>

Question

淡入/淡出和使用JavaScript创建/隐藏<div>

3

我正在运行时创建一些 HTML。为此，我使用以下函数：

function creatediv(id, html, left, top) {

if (document.getElementById(id)) 
    {
        document.getElementById(id).style.display='block';
        fadeIn(id, 300);
    }
    else
    {
        var newdiv = document.createElement('div');
        newdiv.setAttribute('id', id);
        newdiv.setAttribute("class", "warningDiv"); 
        newdiv.style.position = "absolute";
        newdiv.innerHTML = html  + '<h1>(click to close)</h1>';
        newdiv.style.left = left;
        newdiv.style.top = top;
        newdiv.onclick=function(e) {
            fadeOutAndHide(id, 300);
        };  
        document.body.appendChild(newdiv);
        fadeIn(id, 300);
    }

}

这个函数不能在IE浏览器中使用，我不知道为什么。在使用这个JavaScript时没有任何错误警告。以下是淡入函数：

function fadeOutAndHide (id,millisec)
{
    var object = document.getElementById(id).style;
    var opacStart = 100;
    var opacEnd=0;
    var speed = Math.round(millisec / 100);
    var timer = 0;

    for(i = opacStart; i >= opacEnd; i--) {
        setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed));
        timer++;
    } 

    var elemento = document.getElementById(id);
    if (opacEnd==0){
    elemento.style.display='none';
    }
}


function opacity(id, opacStart, opacEnd, millisec) {
    var speed = Math.round(millisec / 100);
    var timer = 0;

    if(opacStart > opacEnd) {
        for(i = opacStart; i >= opacEnd; i--) {
            setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed));
            timer++;
        }
    } else if(opacStart < opacEnd) {
        for(i = opacStart; i <= opacEnd; i++)
            {
            setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed));
            timer++;
        }
    }
}

我有另一个问题：淡出函数不能正常工作。div元素会淡出，但是当div元素隐藏时，“click”事件被触发。以下是淡出函数：

function fadeOutAndHide (id,millisec)
{
    var object = document.getElementById(id).style;
    var opacStart = 100;
    var opacEnd=0;
    var speed = Math.round(millisec / 100);
    var timer = 0;

    for(i = opacStart; i >= opacEnd; i--) {
        setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed));
        timer++;

    } 

    var elemento = document.getElementById(id);
    if (i==1){
    elemento.style.display='none';
    }
}

那么，我应该怎么做来解决这些问题呢？

谢谢

- Armadillo

请发布changeOpac函数的代码。 - Madhu

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Martin · Accepted Answer

抱歉，我不知道你的代码出了什么问题，但我强烈建议您使用现有的JavaScript库（例如jQuery或mootools），这可以让您用一行代码来实现淡入淡出效果，并且应该可以在大多数浏览器中正常工作。