Effet slideUp et slideDown

Bonjour,

Je voudrai masquer temporairement une Div. J'ai fait ce code mais ça marche pas.

https://jsfiddle.net/v759qzxn/2/ (Je veux masquer la Div verte).

Auriez-vous une explication à me donner svp.

Merci à vous.

Arsène

Code HTML :

Code:

---

1 2 3 4 5 6

<input id="Masque" type="button" onClick="$();" value="Masquer" /> <div id="Global"> <div id="Conteneur"> <div id="div1"></div> </div> </div>

---

CODE Jquery :

Code:

---

1 2 3

$("#Masque").click(function () { $('#div1').slideUp(10).delay(1000).slideDown(10); });

---

Code CSS :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

#Global { width:300px; height:100px; background-color: yellow; }   #Conteneur { position: absolute; background-color: red; width:200px; height:100px; }   #div1 { width:200px; height:40px; background-color: green; }

---

slideUp et slideDown possèdent des callbacks ...

Code:

---

1 2 3

$("#Masque").on('click', function () { $('#div1').slideUp(1000, function(){ $(this).delay(2000).slideDown(1000); }) });

---

Bien que l'on puisse aussi le gérer sans le call back en etalant bein les temps des slides et du delay

Code:

---

1 2 3 4

$("#Masque").on('click', function () { $('#div1').slideUp(1000).delay(2000).slideDown(1000); });

---

Mais sans garantie de chainage exacte care si le premier slideDown est plus long que prévu, le delay ne couvrira pas forcement la durée de ce slide.
Mieux vaut passer par le callback qui s'assure que l'animation slide est complete avant d'effectuer le callback .

Merci beaucoup pour ces 2 codes qui fonctionnent très bien :

https://jsfiddle.net/v759qzxn/7/

https://jsfiddle.net/v759qzxn/8/

juste une remarque :
l'exemple de ton premier post sur jsfiddle ne fonctionnera que si t'utilise la version jquery complète, et pas seulement jquery(slim).