FadeOut/In sur une DIV

findmyartists - 18 nov. 2012 à 17:02
findmyartists - 19 nov. 2012 à 18:22

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

A voir également:

FadeOut/In sur une DIV
Div asm - Forum ASM
Table in php - Conseils pratiques -PHP
Exception in thread "awt-eventqueue-0" java.lang.nullpointerexception - Forum Java
Div onclick ✓ - Forum Javascript / DHTML
Server error in '/' application - Forum ASP / ASP.NET

2 réponses

Réponse 1 / 2

cs_L0ci Messages postés 224 Date d'inscription vendredi 26 novembre 2010 Statut Membre Dernière intervention 11 juin 2013 7
19 nov. 2012 à 09:10

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.

Réponse 2 / 2

findmyartists
19 nov. 2012 à 18:22

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

Discussions similaires

la division en java

coller deux div avec du css

Problème avec la division des long

Problème de division réelle (et oui...)

division du type 1/x renvoie 0

Votre réponse

Discussions similaires