Discussion :

[John Vass]

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 !

[SpaceFrog]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

.hide(1500)

[John Vass]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[SpaceFrog]

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$("header").hide(2000)

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

[John Vass]

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...

[SpaceFrog]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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