Плавное включение / выключение и создание / скрытие <DIV> с помощью javascript
-
23-08-2019 - |
Вопрос
Я создаю некоторые из них во время выполнения.Для этого я использую эту функцию:
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++;
}
}
}
Еще одна проблема, которая у меня есть:Функция fadeout не работает должным образом.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';
}
}
Итак, что я могу сделать, чтобы исправить эту проблему?
Спасибо
Решение
Извините, я не знаю, что не так с вашим кодом, но я настоятельно рекомендую вам использовать существующую библиотеку javascript (например jQuery - jQuery - запрос или инструменты обсуждения) который позволяет вам достигать таких вещей, как постепенное затухание с помощью одной строки кода, и должен работать в большинстве браузеров.