begin process at 2012 05 29 05:53:02
  Trouver un code source :
 
dans
 
[ Dernières recherches ]
Accueil > Forum > 

Javascript / DHTML / Ajax

 > 

JavaScript Orienté objet (POO)

 > 

Divers

 > 

Fade in dans le script

Derniers messages déposésPoser une question dans le forum ou lancer une discussion

Fade in dans le script

jeudi 23 septembre 2010 à 21:35:25 | Fade in dans le script

Kitzume
Bonjour,

Ne trouvant pas mon bonheur dans mes recherche, je fait appelle a vous.

Je viens de faire un petit script qui change la couleur suivant la valeur de l'input.
J'aimerais mettre un fade in de la couleur du blanc au rouge par exemple.
Je ne sais pas comment procéder pour réaliser se fade in, le fade out se fera facilement par la suite.

Ma page et sous jquery-1.4.2.min si besoin.

Code Javascript :
function color(){
	
		if(document.formulaire.nombre.value >= 1){
			document.formulaire.style.backgroundColor = "red";


			return false;
		}
		
		if(document.formulaire.nombre.value == 0){
			document.formulaire.style.backgroundColor = "#fff";
			return false;
		}
	}


Je pense que je pourrais faire
if(){
}else{
}
pour l'optimisation par contre je n'arrive pas à le faire fonctionner comme le php :s

Merci d'avance
Kitzume
jeudi 23 septembre 2010 à 22:31:00 | Re : Fade in dans le script

kazma

Administrateur CodeS-SourceS
pour le faire tu peut utilise le css3 mais ce sera uniquement compatible avec les navigateurs recents et pour ie ce sera ie9

Code HTML :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<style type="text/css">

#mondiv {
position: absolute;
top: 300;
left: 300;
width: 400px;
height:400px;
border: 3px solid #000;
}
				 	  
.class1 {
background-color:red;

-webkit-transition-property: background-color;
-webkit-transition-duration: 1s;
-webkit-transition-timing-function: ease-out;
					
-moz-transition-property: background-color;
-moz-transition-duration: 1s;
-moz-transition-timing-function: ease-out;
										
-o-transition-property: background-color;
-o-transition-duration: 1s;
-o-transition-timing-function: ease-out;
				
transition-property: background-color;
transition-duration: 1s;
transition-timing-function: ease-out;
 }
		  
.class2{
background-color:black;

-webkit-transition-property: background-color;
-webkit-transition-duration: 1s;
-webkit-transition-timing-function: ease-out;
					
-moz-transition-property: background-color;
-moz-transition-duration: 1s;
-moz-transition-timing-function: ease-out;
										
-o-transition-property: background-color;
-o-transition-duration: 1s;
-o-transition-timing-function: ease-out;
				
transition-property: background-color;
transition-duration: 1s;
transition-timing-function: ease-out;
}
}
</style>
<script type="text/javascript" language="JavaScript">

function fct(){

if(document.getElementById('nombre').value==1){
document.getElementById('mondiv').className = "class2";
}

else if(document.getElementById('nombre').value==0){
document.getElementById('mondiv').className = "class1";
}

}
</script>
	</head><body>
	
	 <h1>transition CSS3</h1>
	 
<input type='texte' id='nombre'>
	 
<button onclick='fct()'>blabla</button>

		<div id='mondiv' class='class1'></div>
	</body></html>


Cette discussion est classée dans : script, formulaire, document, in, fade

Répondre à ce message

Sujets en rapport avec ce message

script de verification formulaire [ par nacer_1954 ] SVP  j'ai un formulaire ou il ya des boutons radios et un champ de sais Codes JavaScript VS envoi d'un formulaire [ par DoulaDie ] Bonjour, Je me permets de vous présenter le problème que je rencontre. J'ai installé un script (pris sur le web) qui permet le calcul automatique dan Traiter les données d'un formulaire [ par atari54 ] Bonjour à tous ! Je vous expose mon petit soucis : j'aimerais faire un formulaire où l'utilisateur pourrait rajouter, via un champ, l'url d'un site w Vérification formulaire [ par maha1987 ] salut tout le monde, j'ai un formulaire html et css mais le controle javascript ne fonctionne pas j'ai essayé même avec le jquery mais toujours le mê IE: Activer/desactiver un champ d'un formulaire [ par lektrosonic ] Bonjour, Dans mon formulaire il y a ceci : [code=html]?????? ??????? < controle des champs d'un formulaire [ par siatu ] Bonjour tous le monde, j'ai un probleme quand je verifie les champs du mon formulaire et en cas ou la saisie est incorrecte au lieu de rester dans la Besoin Aide Javascript ne fonctionne pas [ par Anicknie ] voici mon code pour mon formulaire _______________________________________________ <table bo problème Javascript [ par Anicknie ] Bonjour, Je suis présentement un cours en hypermédia et je dois réaliser un site simple avec du html, css, javascript et aspx. Voici mon problème : j un script qui ne fonctionne pas!! [ par odiabolik ] bonjour, le script suivant ne fonctionne pas!!![^^sad1] j'ai pas trouver une solution pour ça!!! bon voila le script: function click() {


Nos sponsors


Sondage...

Comparez les prix


Apple iPhone 4 Noir (16 Go)
Entre 0€ et 0€

Visiter le guide achat

CalendriCode

Mai 2012
LMMJVSD
 123456
78910111213
14151617181920
21222324252627
28293031   

Consulter la suite du CalendriCode

A découvrir
 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 0,359 sec (4)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales
Outils Convertisseur VB/C# Snippets et scripts Outils en ligne La ToolBox
Communauté Programmation Photographie Technologie Newsgroups Emploi Forum Blogs
Guide d'achat Téléphonie mobile Image et son Informatique Bureautique Jeux vidéo
Logiciels Internet & Réseau Développement Market Android Jeux & Loisirs Graphisme Multimédia Sécurité Pilotes
Loisirs Cartes virtuelles Vidéos droles Jeux en ligne Géoguide AndroLib (Android Market)