Fade In / Out и создать / скрыть <DIV>с помощью JavaScript - PullRequest
Новая
       51

Fade In / Out и создать / скрыть <DIV>с помощью JavaScript

3 голосов
/ 16 февраля 2009

Я создаю некоторые во время выполнения. Для этого я использую эту функцию: 

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. Это функции де Fade-In: 

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 исчезает, но событие «click» запускается, когда div скрывается. Это функция для затухания: 

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

Итак, что я могу сделать, чтобы решить эту проблему?

Спасибо

1 Ответ

4 голосов
/ 16 февраля 2009

Извините, я не знаю, что не так с вашим кодом, но я настоятельно рекомендую вам использовать существующую библиотеку JavaScript (такую ​​как jQuery или mootools ), которая позволяет вам достичь такие вещи, как появление / исчезновение с одной строкой кода и должны работать в большинстве браузеров.

...