begin process at 2012 05 28 09:59:21
  Trouver un code source :
 
dans
 
Accueil > 

Code

 > 

Trucs & Astuces

 > FADEIN EFFET DE FONDU, ANIMATION D'OPACITE TOUT EN JAVASCRIPT

FADEIN EFFET DE FONDU, ANIMATION D'OPACITE TOUT EN JAVASCRIPT


 Information sur la source

Note :
10 / 10 - par 1 personne
10,00 / 10

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

  • 10
Catégorie :Trucs & Astuces Classé sous :fade, transparence, opacite, javascript, fondu Niveau :Débutant Date de création :16/07/2010 Date de mise à jour :18/07/2010 17:47:16 Vu / téléchargé :6 013 / 568

Auteur : zulrigh

Ecrire un message privé
Site perso
Ce membre participe au partage de revenus publicitaires
Commentaire sur cette source (8)
Ajouter un commentaire et/ou une note


 Description

Cliquez pour voir la capture en taille normale
voila comment faire des effets d'apparition ou de disparition de vos Div ou autre Span comprenant un identifiant

Source

  • function FadeIn(id,millisec){
  • var obj = getReferenceToDiv(id);
  • changeOpac(0,obj);
  • var timer = 0;
  • var speed = Math.round(millisec / 100);
  • var o = 0;
  • for(var a=0;a<100;a++){
  • setTimeout(function(){changeOpac(o,obj);o++;},(timer*speed))
  • timer++;
  • }
  • }
  • function FadeOut(id,millisec){
  • var obj = getReferenceToDiv(id);
  • changeOpac(100,obj);
  • var timer = 0;
  • var speed = Math.round(millisec / 100);
  • var o = 100;
  • for(var a=0;a<100;a++){
  • setTimeout(function(){changeOpac(o,obj);o--;},(timer*speed))
  • timer++;
  • }
  • }
  • function getReferenceToDiv(divId,oDoc)
  • {
  • if(document.getElementById)
  • {return document.getElementById(divId);}
  • if(document.all)
  • {return document.all[divId];}
  • if(!oDoc)
  • {oDoc = document;}
  • if(document.layers)
  • {
  • if(oDoc.layers[divId])
  • {return oDoc.layers[divId];}
  • else{
  • for( var x = 0, y; !y && x < oDoc.layers.length; x++)
  • {
  • y = getReferenceToDiv(divId,oDov.layers[x].document);
  • return y;
  • }
  • }
  • }
  • return false;
  • }
  • function changeOpac(opacity, object) {
  • if(object.style){object = object.style;}
  • object.opacity = (opacity / 100);
  • object.MozOpacity = (opacity / 100);
  • object.KhtmlOpacity = (opacity / 100);
  • object.filter = "alpha(opacity=" + opacity + ")";}
function FadeIn(id,millisec){
	var obj = getReferenceToDiv(id);
	changeOpac(0,obj);
	var timer = 0;
	var speed = Math.round(millisec / 100);
	var o = 0;
	for(var a=0;a<100;a++){
		setTimeout(function(){changeOpac(o,obj);o++;},(timer*speed))
			timer++;
		}
}
	
function FadeOut(id,millisec){
	var obj = getReferenceToDiv(id);
	changeOpac(100,obj);
	var timer = 0;
	var speed = Math.round(millisec / 100);
	var o = 100;
	for(var a=0;a<100;a++){
		setTimeout(function(){changeOpac(o,obj);o--;},(timer*speed))
			timer++;
		}
}



function getReferenceToDiv(divId,oDoc)
	{
	if(document.getElementById)
		{return document.getElementById(divId);}
	if(document.all)
		{return document.all[divId];}
	if(!oDoc)
		{oDoc = document;}
	if(document.layers)
		{
		if(oDoc.layers[divId])
			{return oDoc.layers[divId];}
		else{
			for( var x = 0, y; !y && x < oDoc.layers.length; x++)
				{
					y = getReferenceToDiv(divId,oDov.layers[x].document);
					return y;
				}
			}
		}
	return false;
}


function changeOpac(opacity, object) {
    if(object.style){object = object.style;}
    object.opacity = (opacity / 100);
    object.MozOpacity = (opacity / 100);
    object.KhtmlOpacity = (opacity / 100);
    object.filter = "alpha(opacity=" + opacity + ")";}

 Conclusion

cela parait un peu compliquer aux premiers abord, mais c'est tres simple à utiliser

 Fichier Zip

Les Membres Club peuvent télécharger directement un fichier contenu dans le zip sans télécharger le zip en entier !

Télécharger le zip


 Historique

18 juillet 2010 17:47:16 :
Changement de nom du sujet

 Sources du même auteur

Source avec Zip Source avec une capture NAVIGATION PAR AJAX, CHARGEMENT DES PAGES SANS RECHARGEMENT
Source avec Zip Source avec une capture DEFILEMENT DE BANNIERE PUBLICITAIRE ; ROTATION DE CADRE
Source avec Zip Source avec une capture EFFET DE SURBRILLANCE EN JAVASCRIPT
Source avec Zip Source avec une capture TELECHARGEMENT SANS RECHARGER LA PAGE

 Sources de la même categorie

Source avec Zip Source avec une capture OPTIONS PENDANT LE DÉBOGAGE par avictatum
Source avec Zip Source avec une capture TROUVER UN CONTROLE "ACTIF" DANS UN FORM par didierdeco91
Source avec Zip Source avec une capture RESISTANCES ÉQUIVALENTES par besqueut
Source avec Zip Source avec une capture JACALENDAR par raffika
Source avec Zip EXPORTER LES IMAGES DE WORD ET D' EXCEL par Le Pivert

 Sources en rapport avec celle ci

Source avec Zip Source avec une capture FORMULAIRE TABLEAU par vic511
Source avec Zip Source avec une capture SUBDIVISER LE RÉSULTAT D'UNE RECHERCHE EN PAGES par kimmp
Source avec Zip Source avec une capture CALCULATRICE HEURE par m22001111
Source avec Zip Source avec une capture COPIER DU TEXTE par m22001111
Source avec Zip FADING OBJETS HTML par Vedlen

Commentaires et avis

Commentaire de kertimanoff le 19/07/2010 18:29:02

un petit exemple d'utilisation peut être?

Commentaire de kertimanoff le 19/07/2010 18:32:00 10/10

tout est dans le zip, désolé lol
je chercher justement un ptit effet comme ça pour mon site, merci

Commentaire de rattus le 19/07/2010 18:44:59

salut,
très intéressant comme code.
une question. Comment faire pour que la fonction fadein ne fonctionne qu'une seule fois sur le onClick? car a chaque fois que je clique sur la div, la function se relance, aussi faire en sorte que la div soit transparente au debut.
c'est pour faire une effet qui ressemble à l'actuelle page google.fr.
Par ailleurs, existe-t-il un "onMouseMove" pour remplace le onclick?

merci.

Commentaire de kertimanoff le 19/07/2010 20:50:14

re,
on peut-on fair la méme chose avec des class plutot que des div ?
sinon pour ratus, onmousemove je connais pas mais je connais onmouseover qui peu t'aider a fair comme google
merci

Commentaire de kertimanoff le 19/07/2010 23:05:19

désolé, décidément ce soir j'ai du mal:
dans les div, peut-on faire la même chose avec des class plutot que des id ? car la ça ne fonctionne qu'avec les div à id, tel est ma question

Commentaire de zulrigh le 20/07/2010 10:43:25

Alors; pour faire en sorte que la fonction ne fonctionne qu'une seul fois, le plus simple serait de mettre une variable booleene (true ou false) qui est placé sous forme conditionnel au début du code et change à l'intérieur :
if(bool==false){function FadeIn(id);bool=true;} voila !

sinon, pour jouer avec des classes, mmmmhhh, le plus simple serait de faire une autre fonction du genre :

getReferenceByClassName(class){
var divs = document.getElementsByTagName("div");
var elt = new Array();
for(a=0;a<divs.length;a++){
if(divs[a].classname.match(\class\)){elt.push(divs[a];}}
return elt;}

en fait c'est comme getElementsByClassName mais qui fonctionne sur tout les navigateurs ; (pas sur de cet fonction, faudra tester .. et puis je vient seulement de me lever de mon lit!)

Commentaire de rattus le 20/07/2010 14:47:32

c'est moi ou ca ne fonctionne que sur chrome?
chez moi, ca ne marche ni sur ie ni sur firefox.
dommage j'avais fait une mise a jour de mon site avec ce code.

Commentaire de rattus le 21/07/2010 01:21:46

ok, ca marche très bien. c'est juste un problème avec l'alpha dans flash, du coup le fade in sur la div contenant le flash foire. alors je n'ai pas fait de fade in sur la div du flash, mais un fade out sur la div du dessus, et la, nickel! ca fonctionne sur firefox, ie et chrome. le reste j'ai pas essayé.
bravo pour ton code et merci pour tes conseils.
-f-

 Ajouter un commentaire


Discussions en rapport avec ce code source dans le forum

Png sous ie javascript [ par dreadstock ] Bonjour, j'ai suivi le tuto BUG FIX DE LA TRANSPARENCE DES PNG SOUS IE 6pour la transparence png sous ie , mais ca ne marche pas. pourriez vous jeter Appel de fonction javascript [ par toki50 ] Bonjour,Le bas de la page suivante montre un exemple (très simple) d'application Ajax effectuant une requête sur l'API de Youtube et renvoyant une lis checkbox en javascript [ par ibralnet ] salut a tous:je suis pas tres doué en javascript.j'ai un petit probleme.Voila je veux tester les checkbox de mon formulaire sachant que j'ai mis dans Messagerie type net send en javascript [ par KILLGUNBLOOD08 ] Bonjour à tous,Voilà j'ai développé un site intranet pour une entreprise  en Php, sql et javascript. A l'époque l'on m'avait demandé de faire un outil Javascript : "with" [ par Lobb88 ] Bonjour, je voudrais savoir dans cette fonction a quoi sert le "with" exactement s'il vous plait. Merci beaucoup.function ClassObjet(monObjet)    {    Session, javascript, php [ par nico1214 ] Bonjour,Je ne sais pas si je suis dans le bon thème...Je voudrais savoir s'il est possible de "retenir" une variable et sa valeur en javascript. En ph un input en ecoute un autre? [ par newlc ] Salut,je souhaite faire un truc tout bête en javascript,en faite je voudrais que lorsque que l'on saisie du texte dans un input et bien que le second javascript bouton on click [ par zouker1340 ] Bonjour a tous, je suis vraiment dans la merde hihi voila j ai un probleme en javascript je dois faire un travail sur l ecobonus mais j arrive pa page d'avertissement (disclaimer) javascript [ par badziz ] Bonjour,je désire réaliser une page d'avertissement disclaimer en javascript (ou autre s'il y a mieux) à l'entrée d'un site. Ce message ne doit s'affi barre de défilement vertical de texte en javascript [ par ordirepair ] bonjour, je cherche un script en java pour créer un block texte avec une hauteur fixe et une barre de défilement à droite si le texte est plus long je


Nos sponsors


Sondage...

Comparez les prix

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 : 5,959 sec (3)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales