11550 sujets

JavaScript, DOM et API Web HTML5

[RESOLU] Mootools: effet fade à partir de 0 à l'ouverture d'une page

Bonjour,

J'ai des images que je souhaite faire apparaitre avec une opacité à 0.3 à l'ouverture de la page.
Puis quand on passe la souris dessus, l'opacité passe à 1.
Pour cela, j'utilise Mootools et le script suivant:

window.addEvent('domready', function() {

	elt = $$('#partenaires a');
		elt.each(function(item, index){
		
		item.fade(0.3);
		
		item.addEvent('mouseover', function(e) {
				e.stop();
				item.fade(1);
		});
		
		item.addEvent('mouseout', function(e) {
				e.stop();
				item.fade(0.3);
		});
	});

});


Le problème c'est que quand la page s'ouvre, les éléments apparaissent déjà en opacité 1 puis le Fade à 0.3 s'effectue..ca fait donc un flash.

J'ai sorti mon script du DomReady...c'est déjà un peu mieux..mais pas top.
J'ai essayé en mettant mes éléments en display none dans ma CSS puis en le mettant à Block à la fin du DomReady...Mais ca ne donne rien.

Dernière solution qui est la moins pire: Je met le Fade à 0.3 via CSS, mais la première fois que tu passes la souris sur un élément, le fade du MouseOver ne se fait, ca s'est un cut à 1...par contre, les fois suivantes c'est bon.

J'ai rencontré plusieurs fois ce problème sans trouver de solutions..

Merci d'avance pour votre aide

Marco
Modifié par pifoux (26 Aug 2009 - 21:10)
Salut Smiley smile

Ne jamais indiqué directement en CSS ce que tu vas désactivé avec le JS.

Car si l'utilisateur n'a pas le JS d'activé, et bien il restera avec des mauvaise propriété CSS.

Donc, j'ai une autre idée pour toi.

En JS, tu écris juste après ton body, une div, avec un style="display:none". N'oublie pas de fermer cette div juste avant la balise body de fin.

Ensuite, en JS, quand la DOM est prète, tu affiche en fade le contenu de la page.

Pas de flash assuré !
Modifié par Super_baloo8 (25 Aug 2009 - 21:39)
Salut,

Je n'arrive pas à faire marcher ton truc de display:none.

En fin de page, dans le domready, j'ajoute le fade...mais ca ne fait rien.
Si je fais un display:block avant le fade ou après...j'ai toujours le flash.

Dommage l'idée me plaisait bien..je vais creuser la question.

Merci pour ton aide

Marco
Regarde le fonctionnement de cette page :

http://www.grid-france.net

Juste après le body :


<body>

<script type="text/javascript">
//<![CDATA[
document.write('<div id="chargement_page"><p>Chargement en cours, veuillez patienter ...<\/p><\/div><div id="affichage_page" style="display: none;">')
//]]>
</script>


Ensuite, tu retrouve tout le code de ta page :


<h1>Titre</h1>

<p>Contenu</p>


Puis avant la balise de fermeture du body, tu ferme de la même manière la div qui englobe ton contenu :


<script type="text/javascript">
//<![CDATA[
document.write('<\/div>')
//]]>
</script>

</body>


Avec ce code, tu as ceci :

a écrit :

DIV
Chargement en cours
/DIV

DIV qui contient la règle css Display NONE
tout le contenu à cachée au chargement
/DIV


Comme le tout est écris en JS, pas de soucis si le JS est désactivé.

Ensuite, pour l'effet d'affichage, je n'utilise pas mootools, mais jquery, mais je pense que tu dois avoir les fonctions similaire


<script type="text/javascript">
	//<![CDATA[
	//menu
$(document).ready(function(){
	$('div#affichage_page').fadeIn('fast');
	$('div#chargement_page').hide();
	});
	//]]>
</script>
Merci pour tout ces détails.
Je faisais la meme chose...en HTML, pas en JS, mais bon, je ne pense pas que ca change quelque chose.
Pareil pour le fade, mais en Mootools...et je pense que c'est la que ca coince.
Il semblerait que JQuery change le display avant de faire son FadeIn et il part bien de 0 pour le faire.
Alors que Mootools semble ne pas changer le display et ne part pas de 0.
Donc avec Mootools: soit le Fade ne se fait pas..Car le display est à None...Soit si je le passe à block, j'ai un flash car le elt.fade(1) ne commence pas à 0...
Mais en écrivant, je réfléchis et j'ai peut etre une idée..
Je creuse et reviens vers vous

Marco
J'ai trouvé le truc...

Il faut affecter l'opacité comme ca:
item.set('opacity',0.3);

Je pensais avoir testé déjà ce truc...mais j'ai du me tromper.

Désolé pour le bruit
et encore merci pour votre aide.

Marco
Sujet clos
Aller à