Fade In / Out et créer / cacher avec javascript
-
23-08-2019
- |
-
-
23-08-2019 - |
Question
Je crée une sur l'exécution. Pour que j'utilise cette fonction:
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);
}
}
Cette fonction ne fonctionne pas avec IE, et je ne sais pas pourquoi. Je reçois pas d'erreur-warnings avec ce javascript. Ceux-ci sont dØ Fade en fonctions:
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++;
}
}
}
Un autre problème que j'ai: La fonction fadeout ne fonctionne pas correctement. Les fades div, mais l'événement « clic » est déclenché lorsque la div est cacher. Ceci est la fonction pour 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';
}
}
Alors, que puis-je faire pour résoudre ce problèmes?
Merci
La solution
Désolé, je ne sais pas quel est le problème avec votre code, mais je recommande fortement d'utiliser une bibliothèque javascript existante (par exemple ou href="http://demos.mootools.net/Effects#" rel="nofollow noreferrer"> Mootools ) qui vous permet de réaliser des choses comme fade in / out avec une ligne de code et devrait fonctionner dans la plupart des navigateurs.