JQuery fade effect avec IE7

Bonjour,

j'utilise un javascript (avec jQuery) pour afficher sur une photo (quand on clique dessus) les données Exif.
vous pouvez voir l'effet sur cette page: http://portfolio.maxk.fr/?p=133


J'ai fait pour cela le script suivant:

$(document).ready(function()
{

jQuery.fn.fadeToggle = function(speed, easing, callback) { 
   return this.animate({opacity: 'toggle'}, speed, easing, callback); 
}; 

  $("div#content .post .full-photo .photo-credit").hide();
  $("div#content .post .full-photo").css('cursor','pointer').click(function()
  {
	$(this).children("div#content .post .full-photo .photo-credit").fadeToggle(300);  
  });
});

voici le code CSS:

.single .post .full-photo .photo-credit {
	color:#000000;
	font-size:12px;
	font-weight: 200;
	position:absolute;
	padding: 7px 10px 10px 10px;
	left:0;
	width:210px;
	height:73px;
	background:#FFFFFF;
	z-index:99;
	-moz-opacity:0.7;
	filter:alpha(opacity=70);
	opacity:0.7;
	}

et le code HTML:

<div id="post-133" class="post">
	<div class="full-photo">
		<div class="photo-credit">
			<div class="names">
				Appareil : <br />
				Ouverture : <br />
				Exposition : <br />
				ISO : <br />
				Focale : <br />
			</div>
			<div class="values">
				Canon EOS 30D<br />
				f9<br />
				1/160 s<br />
				100<br />
				17 mm<br />
			</div>
		</div>

		<img src="http://portfolio.maxk.fr/wp-content/uploads/2009/09/MG_7415.jpg" />
	</div>

Sous FF ou Safari cela fonctionne bien: Quand on click sur la photo, le cadre apparait et à la fin de l'effet il garde une transparence (opacity:0.7)
Mais sous IE7 avec cette effet, la transparence ne fonctionne pas.

Bonsoir,

Alors si j'ai bien comprit (en ce moment j'ai du mal ><) IE7 passe d'une opacité 0 à 1 ?

Dans ce cas, en l'indiquant en dur ? Ou avec fadeOut et fadeIn ?

En fait, j'ai fait plusieurs tests:
fadeIn et fadeOut ne permettent pas de spécifier une opacité finale (on passe de 0 à 1) mais avec safari ou FF cela ne pose pas de pb car l'opacité finale est prise en compte avec le CSS.

Sous IE (7 ou 8) c'est le JS qui est prioritaire, d'où ce post.
j'ai donc essayer avec la fonction "fadeTo()" mais je n'arrive pas à la faire fonctionner.

Bref, si je n'ai pas de solution ces jour-ci, je pense que je vais plus ou moins abandonné la chose car ce n'est pas vraiment très gênante.

Bonsoir,

Comme ça ?

$(document).ready(function() 
{
	jQuery.fn.fadeToggle = function(speed, opacity, callback){
		var $this = this;
		this.each(function(){
			if (jQuery.data(this, "visible"))
			{
				$this.stop().fadeTo(speed, 0, callback);
				jQuery.data(this, "visible", false);
			}
			else
			{
				$this.stop().fadeTo(speed, opacity ? opacity : 0.7, callback);
				jQuery.data(this, "visible", true);
			}
		});
	};
	$("div#content .post .full-photo").css('cursor','pointer').click(function(){
		$(this).children(".photo-credit").fadeToggle(300);
	}).children(".photo-credit").fadeTo(0,0);
});

En fait j'ai trouvé la solution entre temps pour "utiliser fadeTo".

Dans mon CSS j'avais la propriété: "display: none" qui était supprimée lorsque la fonction "fadeIn" est appelée.
Donc le fading fonctionnait.

Avec "fadeTo", la propriété "display: none" persistait et rien ne s'affichait.

J'ai donc juste remplacé "display: none" par "opacity:0" et la fonction fadeTo fonctionne maintenant parfaitement.