FadeIn mais pas FadeIn [resolu]

Salut,

Je voudrais faire apparaitre un element avec FadeIn, sauf que l'espace occupé par cet element doit apparaitre d'un seul coup et seulement l'opacité de l'element doit graduellement passer de 0 a 100.

Comment faire ca ?

Sauf erreur de ma part c'est comme ca que fonctionne fadeIn :

<script type="text/javascript">
				
$(document).ready(function(){
		$("a").click( function () {
			$(".cachee").fadeIn(10000);
		});
		
});

		</script>

<div class="cachee">
    			Div cachée 1
			</div>
			<div>
    			<a href="#">Click me</a>
			</div>
			<div>
    			<a href="#">Click me</a>
			</div>

div {
				float : left;
				width : 48%;
				margin : 5px;
				height : 60px;
				text-align :center;
				background : #fff8e7;
				border : 1px dotted #ccc;
			}
						
			.cachee {
				display : none;
				background : #b8f8e7;			
			}

Euh non... FadeIn() joue autant sur l'espace que l'opacité. Ma question est : comment jouer juste sur l'opacité ?

http://docs.jquery.com/Effects/fadeIn

Tu as un exemple de code, parce que même sur la page jquery ci-dessus, l'élément prend la place , puis ensuite fadeIn joue sur l'opacité.

Autant pour moi rs459 j'utilise Toggle() et non fadeIn(). Bon mais ma question demeure sensiblement la meme :

Comment faire pour que Toggle() ne fasse apparaitre un element graduellement QUE au niveau de son opacité ? Si on prend l'exemple du dernier quart de la page http://api.jquery.com/toggle/ avec les lignes en rose, on voit que le volume de l'element passe de 0 a 100% de facon graduelle. Moi je veux que ce soit instantané, mais pas pour l'opacité.

J'en profite pour rajouter une 2eme question :

Comment supprimer l'effet de saccade qui accompagne Toggle() comme dans l'exemple suivant : http://fr.php.net/manual/fr/function.error-reporting.php (cliquer plusieurs fois sur le petit 'plus' a gauche de "Liste de parametres". A la fin de l'animation il y a un accoud assez laid. Est-il possible de l'eviter ?
Modifié par apericube (02 Feb 2010 - 21:11)

apericube a écrit :
Comment faire pour que Toggle() ne fasse apparaitre un element graduellement QUE au niveau de son opacité ?

Pas sûr de bien saisir mais à priori quelque chose comme ceci:

<script>
  $(function(){
    $("p").hide().before($("<a/>", {
      text: "Toggle text",
      href: "#",
      click: function() {
        var $p = $(this).next();
        if($p.is(":visible")) $p.fadeOut();
        else $p.fadeIn();
        return false;
      }
    }))
  });
</script>
<p>Hello world!

Mmh un Toggle() "fait maison" quoi. C'est une idée mais j'aime a croire qu'on peut quand meme utiliser la fonction Toggle() pour obtenir le resultat que je veux. Il doit bien y avoir un moyen!

apericube a écrit :
Mmh un Toggle() "fait maison" quoi. C'est une idée mais j'aime a croire qu'on peut quand meme utiliser la fonction Toggle() pour obtenir le resultat que je veux. Il doit bien y avoir un moyen!

Ben heu oui, je viens de te le donner le moyen
Il n'y a pas de fonctions built-in pour tous les besoins et toutes les animations possibles, ça semble logique non?

Et en utilisant tout bêtement .animate() ?

[EDIT] Ou en spécifiant la taille de l'élément via le css pour qu'il soit toujours de la même taille ? Ou son conteneur ?
Modifié par Skoua (05 Feb 2010 - 16:11)

Finalement j'ai fait comme a dit Benjamin et ca marche bien. Gracias!
Modifié par apericube (23 Feb 2010 - 09:59)

Il était aussi possible de chainer les fonctions, en faisant d'abord show sur le conteneur, puis fadeIn sur son contenu... Enfin je pense