FadeOut/In sur une DIV

Signaler
-
 findmyartists -
Bonjour à toutes et à tous,

Je vous expose mon problème. Je cherche à faire un FadeOut et un FadeIn sur 2 DIV. Mais étant vraiment débutant en Javascript j'ai beaucoup de mal.

Voici le code de ma page :

<html>
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="style.css" type="text/css" charset="utf-8" />

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/custom.js"></script>
<script type="text/javascript" src="js/jquery-1.3.1.min.js"></script>

<script type="text/javascript" language="javascript">
function a(){
var Arg = arguments;
var Obj;
for( var i=0; i< Arg.length; i++){
Obj = document.getElementById( Arg[i]);
if( Obj){
Obj.style.visibility = "visible";
Obj.style.display = "";
}
}
}
function m(){
var Arg = arguments;
var Obj;
for( var i=0; i< Arg.length; i++){
Obj = document.getElementById( Arg[i]);
if( Obj){
Obj.style.visibility = "hidden";
Obj.style.display = "none";
}
}
}
</script> 

<title>TEST</title>

</head>





<center>http://www.TEST.com
Findmyartists.com<center>		



S'enregistrer / [forgot_password.php Mot passe oublié]








Précédent





</form>




</html>


Donc pour le moment, le transition entre les 2 DIV (login & register) se font correctement, mais ce n'est pas très jolie visuellement, c'est donc pour cela que je souhaiterai rajouter une petit effet de FadeOut/In.

Je vous remercie par avance pour votre aide !
A bientôt

2 réponses

Messages postés
224
Date d'inscription
vendredi 26 novembre 2010
Statut
Membre
Dernière intervention
11 juin 2013
7
Bonjour,

Si tu n'es pas contre l'utilisation de JQuery tu as des fonctions toutes faites:

$("#login").fadeOut(500, function(){$('#login').style.visibility = "collapsed";});
$("#register").fadeIn(500, function(){});
J'ai pas test le code mais ça devrait être quelque chose ressemblant à ça.

Bonjour,

Merci pour ta réponse L0ci,

Je suis donc bien arrivé à faire la transition de #login à #register, mais je n'arrive pas à faire l'inverse. Voici mon code :

<script type="text/javascript" language="javascript">
function a(){
var Arg = arguments;
var Obj;
for( var i=0; i< Arg.length; i++){
Obj = document.getElementById( Arg[i]);
if( Obj){
$("#login").fadeOut(500, function(){$('#login').style.visibility = "collapsed";});
$("#register").fadeIn(500, function(){});
Obj.style.visibility = "visible";
Obj.style.display = "";
}
}
}
function m(){
var Arg = arguments;
var Obj;
for( var i=0; i< Arg.length; i++){
Obj = document.getElementById( Arg[i]);
if( Obj){
$("#register").fadeOut(500, function(){$('#register').style.visibility = "collapsed";});
$("#login").fadeIn(500, function(){});
Obj.style.visibility = "hidden";
Obj.style.display = "none";
}
}
}


</script>

Une idée ?
Merci encore pour ton aide