11550 sujets

JavaScript, DOM et API Web HTML5

Fadein fadeout

salut

j'essaie de faire apparaitre un texte progressivement en cliquant sur une des images de ce menu

http://xavierperrard.com/dev/webx/

mais sur ie8, problème de fade

il existe 1000 solutions différentes, je sais mais laquelle est la + adaptée

ça fait 2 ans que je tombe sur ce problème

le plus simple étant
1:d'avoir un BG blanc mais bon...
2:de supprimer la propriété filter pour l'ombrage d'ie
3:de mettre l'opacité à 0 avant le fade et se la jouer progressif
4:faire une méthode animate de bourrin

laquelle est la meilleure dans mon cas

j'aimerai bien ne plus tourner sur stackoverflow merci !!!
on sait jamais si on me réponds

Le titre de mon sujet est très peu approprié

j'aurai du mettre fadein sur ie7 ie8 de M**** Smiley boulet
apparentement avec un fadeto et son second param opacity à 0.99 ça marche bien

ensuite dans le callback je mets l'opacité à 1


			var id=$(this).parent("a").attr("id");
			$("."+id).fadeTo(4000,0.99,function(){
				$(this).css("opacity",1);
			
			});


sous ietester TESTE sur ie8 il a bien rajouté les filtres mais le texte reste encore trop clair

vraiment strange §§

ya quelqu’un d intéressé ???

http://xavierperrard.com/dev/graphisme/
Modifié par phpCbien (11 Apr 2012 - 13:26)
bonjour

ce sont des div avec une class qui sont cachées au démarrage du script

en quoi un id changerait la donne

le menu actions

		<div id="nav_graphisme">
	<a id="identite" href=""><img class="active" src="../web/img/graphisme/BtnService01.gif"/></a>
	<a id="graph" href=""><img src="../web/img/graphisme/BtnService02.gif"/></a>
	<a id="illustr" href=""><img src="../web/img/graphisme/BtnService04.gif"/></a>
	<a id="multi" href="" ><img src="../web/img/graphisme/BtnService03.gif"/></a>
	</div>


les contenus


	<div class="content_right" id="graphisme">
	<div class="identite" style="display:block;">
	<h2>services<span> IDENTITE VISUELLE</span></h2>
	<ul>
	<li>- Logo et charte graphique</li>
	<li>- tête de lettre</li>
	<li>- suivi de lettre</li>
	<li>- signature mail</li>
	<li>- carte de correspondance</li>
	</ul>
	</div>
	<div class="graph"">
	<h2>services<span> PRINT</span></h2>
	<ul>
	<li>- Carte de visite</li>
	<li>- Plaquette commerciale</li>
	<li>- Flyer - Brochure - Catalogue</li>
	<li>- Calendrier</li>	
	</ul>
	</div>
	<div class="illustr">
	<h2>services<span> MULTIMEDIA</span></h2>
	<ul>
	<li>- site internet </li>
	<li>- animation - vidéo </li>
	<li>- graphisme pour jeux web</li>		
	</ul>	
	</div>
	<div class="multi">
	<h2>services<span> AUTRES</span></h2>
	<ul>
	<li>- illustration </li>
	<li>- photomontage </li>
	<li>- graphisme en tous genres </li>
	<li>- Interface logiciel </li>		
	</ul>	
	</div>
	</div>


le js


    $("#nav_graphisme img")
    .mouseover(function() {    	
	    	var src =".."+ $(this).attr("src").match(/[^\.]+/) + "Over.jpg";    	
	        $(this).attr("src", src);
    })
    .mouseout(function() {
	       var src = $(this).attr("src").replace("Over.jpg", ".gif");       
	       $(this).attr("src", src);
    })
    .click( function() {
        	//je supp les elet actifs
			$('#nav_graphisme a').each(function() {
			$(this).children("img").removeClass("active");			
			
		});		
			//je cache les contenus visibles
			$('.content_right div').hide();
			//active la bonne image
			$(this).toggleClass("active");
			//contenu adéquat

			
			var id=$(this).parent("a").attr("id");
			$("."+id).fadeTo(4000,0.99,function(){
				$("."+id).css("opacity",1);
			
			});
					

			return false;
	 });
	 });
Modérateur
Ok je comprends. Ce n'est en effet pas ça le problème. J'ai cru que c'était une erreur car c'est un peu tordu comme logique.

As-tu essayé sur un exemple beaucoup plus simple? Il me semble pas avoir eu des problèmes avec des fade jquery sous ie8…
a écrit :
As-tu essayé sur un exemple beaucoup plus simple?


un background blanc oui

mais ça me botte pas sinon faudrait que je détermine un width à mes éléments h2 et p de type block et ça pue !

je connais les hack pour les png mais pour le texte c'est une autre histoire

encore que la dans mon css, j'ai trouvé une alternative

.content_right#graphisme div {
	width: 100%;
	height: 369px;
	display: none;
	float: right;
	opacity: 0;
	zoom: 0;
	
}


et mon js

			$("."+id).fadeTo(2000,0.99,function(){
				$(this).css("opacity",1);
				$(this).css("zoom",1);
				if ($.browser.msie){this.style.removeAttribute('filter');}
				
			
			});


bon je sais j'aurai pu prendre des id pour mes élément cachés display none vu que kils sont uniques

mais j'ai fait au plus vite...

me reste ptèt la méthode animate en dernier recours

mon dieu

autant j adore combiner des scripts de carousels avec d'autres techs et je kiffe ça autant ces petits prob superficiels me laissent pantois Smiley rale
Sujet clos
Aller à