Animer une transformation

Salut !

Je veux faire en sorte de rendre un <header> invisible...
Bon, on passe par le CSS avec un Opacity à 0... Mais moi, je cherche à animer cette transformation..., le passant de 100 à 0... en 1500 ms par exemple...
Et comme je débute en JQuery... Bah, j'ai un peu de mal à trouver les bonnes pistes...

Peux-t-on éclairer ma lanterne là dessus ?

Merci !

Code:

---

.hide(1500)

---

Oups...
Désolé, j'ai mal expliqué le but de la manoeuvre...
Mais bon, j'ai quand même trouvé ce que je cherche... En fait, je ne voulais pas le rendre invisible, mains transparent... Pour éviter qu'il me casse ma mise en page quand je le masque (car sur ce point, avec ma structure html, il champion ! ^^)... J'ai trouvé mon bonheur avec cà...

Code:

---

1 2	$("header").animate({opacity:0}, 2000)

---

Maintenant, j'essaie de faire la même chose avec la couleur de fond... Mais là, ca marche pas... Est-ce juste une erreur ou la manip n'est pas la bonne ?

Code:

---

1 2	$("header").animate({background:rgba(100,150,180,0.4)}, 2000);

---

Si ca trouve, je suis en train de faire n'importe quoi ^^

Merci

tu peux cacher comme ceci avec le meêm effet que ton opacity 0

Code:

---

$("header").hide(2000)

---

pour le background il faut un plugin
par exemple http://www.bitstorm.org/jquery/color-animation/

Ok, j'essaierai çà..
Par contre, j'ai une autre interrogation...
Je fais une action d'opacity pour mon background et mon header...
Mais comme je suis assez chiant (et aussi pour apprendre), j'aimerai qu'une action se fasse après l'autre... Alors là-dessus, j'ai entendu parler des callbacks, mais les exemples que j'ai trouvé sont peu clairs ou sont placé dans des vrais pâtés de code !

Y a t-il un exemple simple que je puisse exploiter ?
Avec cette dernière réponse, j'aurai de quoi faire, déjà... ;)

Merci...

Code:

---

$("header").animate({opacity:0}, 2000,mafonctioncallback)

---

Ok, je fait les essais dès que possible... Je marquerai le sujet comme résolu quand tout fonctionnera...

Pour l'opacité, il est préférable de passer par fadeIn(), fadeOut() ou fadeTo() que par animate()...

J'en prend note !
Merci du conseil ;)

Ok, pour la partie animation, c'est cool, ca marche ! Maintenant, je veux utiliser des fonctions avec des boutons de nav...
J'ai essayé en utilisant un onClick sur l'un d'eux menant à un simple "alert" comme ceci

HTML :

Code:

---

<a href="#" onclick="fonction_test()">Accueil</a>

---

JS :

Code:

---

1 2 3 4

function fonction_test(){ alert("La fonction se déclenche maintenant."); }

---

...mais çà ne donne rien...

Quelle en est la raison ? J'ai fait une gaffe là-dedans, ou le JQuery ne l'accepte tout simplement pas ?
Et comment faire pour que ça tourne ?
Avec çà, j'aurai enfin fait le tour du sujet !
Merci !

C'est bon j'ai trouvé ! Fausse alerte... J'ai utilisé çà et ca marche

Code:

---

1 2 3 4

$("nav a").click(function() { alert("La fonction se déclenche maintenant."); });

---

Bon, je vais déjà me dépatouiller avec çà... Et je ferai un autre post quand j'en aurai besoin !

Tchao !