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)

[John Vass]

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

[Bovino]

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

[John Vass]

J'en prend note !
Merci du conseil

[John Vass]

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 :

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

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

JS :

Code :

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

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 !

[John Vass]

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

Code :

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

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 !