Faire un Fade-In & un Fade-Out.
linux1155
Messages postés
37
Statut
Membre
-
linux1155 Messages postés 37 Statut Membre -
linux1155 Messages postés 37 Statut Membre -
Bonjour,
J'aimerais faire apparaître ma-page-web, suite à un clic sur une autre page, faire apparaître ma page en Fade-In de rien à 100%, puis lorsque l'usager clic sur un bouton, je fais un Fade-Out pour afficher une autre page. Je suis sur que c'est possible, pour l'avoir déjà vue, J'ai trouvé quelque chose en JQuery, mais je n'y connais rien, alors en Javascript serait idéal.....
J'aimerais faire apparaître ma-page-web, suite à un clic sur une autre page, faire apparaître ma page en Fade-In de rien à 100%, puis lorsque l'usager clic sur un bouton, je fais un Fade-Out pour afficher une autre page. Je suis sur que c'est possible, pour l'avoir déjà vue, J'ai trouvé quelque chose en JQuery, mais je n'y connais rien, alors en Javascript serait idéal.....
A voir également:
- Faire un Fade-In & un Fade-Out.
- Hdmi out - Forum Format et connectique vidéo
- Deco in paris avis ✓ - Forum Consommation & Internet
- Av out - Forum Cinéma / Télé
- In da place - Forum Mail
- Aux in ✓ - Forum Enceintes / HiFi
En fait j'ai trouvé ce code.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Mon compte</title>
<script type="text/javascript">
var TimeToFade = 1000.0;
function fade(eid)
{
var element = document.getElementById(eid);
if(element == null)
return;
if(element.FadeState == null)
{
if(element.style.opacity == null
|| element.style.opacity == ''
|| element.style.opacity == '1')
{
element.FadeState = -2;
}
else
{
element.FadeState = 2;
}
}
if(element.FadeState == 1 || element.FadeState == -1)
{
element.FadeState = element.FadeState == 1 ? 1 : -1;
element.FadeTimeLeft = TimeToFade - element.FadeTimeLeft;
}
else
{
element.FadeState = element.FadeState == 2 ? 1 : -1;
element.FadeTimeLeft = TimeToFade;
setTimeout("animateFade(" + new Date().getTime() + ",'" + eid + "')", 33);
}
}
function animateFade(lastTick, eid)
{
var curTick = new Date().getTime();
var elapsedTicks = curTick - lastTick;
var element = document.getElementById(eid);
if(element.FadeTimeLeft <= elapsedTicks)
{
element.style.opacity = element.FadeState == 1 ? '1' : '0';
element.style.filter = 'alpha(opacity = '
+ (element.FadeState == 1 ? '100' : '0') + ')';
element.FadeState = element.FadeState == 1 ? 2 : -2;
}
element.FadeTimeLeft -= elapsedTicks;
var newOpVal = element.FadeTimeLeft/TimeToFade;
if(element.FadeState == 1) {
newOpVal = 1 - newOpVal;
}
element.style.opacity = newOpVal;
element.style.filter = 'alpha(opacity = ' + (newOpVal*100) + ')';
setTimeout("animateFade(" + curTick + ",'" + eid + "')", 33);
}
function retour() {
window.location.href="principal.php";
}
</script>
</head>
<body id="block" onclick=fade("block")>
<div>
<h1>Juste pour voir si ça fonctionne</h1>
<p><input type="submit" value="Retour" onclick="fade("block"); retour()"/></p>
</div>
</body>
</html>
Il ne fais pas de Fade-in de 0 à 100%, fais le fade-out, mais ne me redirige pas à principal.php.
J'ai fais plusieurs tounipette............ sans succès......... j'ai cherché autre code mais en vain.
Alors un gros HELP!
Merci.