dom - Fade InOut and createhide <DIV> with javascript

admin管理员组
文章数量:1024670

I'm creating some on runtime. For that I'm using this function:

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

}

This function doesn't work with IE, and I don't know why. I get no error-warnings with this javascript. These are de Fade-in functions:

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++;
        }
    }
}

Another problem that I have: The fadeout function doesn't work properly. The div fades, but the event "click" is fired when the div is hide. This is the function for fadeout:

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';
    }
}

So, what can I do to fix this issues?

Thanks

I'm creating some on runtime. For that I'm using this function:

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

}

This function doesn't work with IE, and I don't know why. I get no error-warnings with this javascript. These are de Fade-in functions:

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++;
        }
    }
}

Another problem that I have: The fadeout function doesn't work properly. The div fades, but the event "click" is fired when the div is hide. This is the function for fadeout:

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';
    }
}

So, what can I do to fix this issues?

Thanks

Share Improve this question asked Feb 16, 2009 at 11:36 RSilva 6,94311 gold badges44 silver badges50 bronze badges

Please post the changeOpac function code – Madhu Commented Dec 30, 2009 at 8:25

Add a ment |

1 Answer 1

Sorted by: Reset to default 4

Sorry, I don't know what's wrong with your code, but I strongly remend you use an existing javascript library (such as jQuery or mootools) which allows you to achieve things like fade in/out with one line of code and should work in most browsers.

I'm creating some on runtime. For that I'm using this function:

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

}

This function doesn't work with IE, and I don't know why. I get no error-warnings with this javascript. These are de Fade-in functions:

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++;
        }
    }
}

Another problem that I have: The fadeout function doesn't work properly. The div fades, but the event "click" is fired when the div is hide. This is the function for fadeout:

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';
    }
}

So, what can I do to fix this issues?

Thanks

I'm creating some on runtime. For that I'm using this function:

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

}

This function doesn't work with IE, and I don't know why. I get no error-warnings with this javascript. These are de Fade-in functions:

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++;
        }
    }
}

Another problem that I have: The fadeout function doesn't work properly. The div fades, but the event "click" is fired when the div is hide. This is the function for fadeout:

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';
    }
}

So, what can I do to fix this issues?

Thanks

Share Improve this question asked Feb 16, 2009 at 11:36 RSilva 6,94311 gold badges44 silver badges50 bronze badges

Please post the changeOpac function code – Madhu Commented Dec 30, 2009 at 8:25

Add a ment |

1 Answer 1

Sorted by: Reset to default 4

本文标签： domFade InOut and createhide ltDIVgt with javascriptStack Overflow

版权声明：本文标题：dom - Fade InOut and createhide <DIV> with javascript - Stack Overflow 内容由热心网友自发贡献，该文观点仅代表作者本人，转载请联系作者并注明出处：http://it.en369.cn/questions/1745609457a2158917.html，本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。

369IT编程

dom - Fade InOut and createhide <DIV> with javascript - Stack Overflow

1 Answer 1

1 Answer 1

更多相关文章