fade in/out d'un div sur l'opacité/la hauteur/ la largeur
Bonjour à tous,
J'ai un petit os, avec une fonction que j'ai reprise, que j'ai pu mettre en forme comme je voulais à un détail près que je n'arrive pas à résoudre.
but final.
faire apparaitre un div de la manière suivante: d'abord la hauteur augmente jusqu'à la hauteur désirée ensuite, cette "ligne" verticale va s'élargir jusqu'à la largeur désirée pour ce div. le tout avec l'opacité qui augmente.
Et fatalement la même chose dans l'autre sens pour refermer.
voici le code
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
|
// cette fonction est appelée par le bouton d'ouverture/fermeture
function setControl(which)
{
// gets the control button
//var control = document.getElementById("control_"+which);
//if (!control) {
// return false;
//}
// gets the control panel
//var tableau = document.getElementById("content");
var panel = document.getElementById("panel_"+which);
if (!panel) {
return false;
}
// show panel
if (panel.style.display != "block") {
panel.style.display = "block";
fadePanel(which, true);
// hide panel
} else {
//tableau.style.display = "none";
panel.style.display ="none";
fadePanel(which, false);
// tableau.style.display = "block";
}
return true;
}
// fade in delay for panel to appear, default is 10
var fadein_speed = 2;
// fade out delay for panel to hide, default is 5
var fadeout_speed = 3;
// smoothness of fade, lower is better, but it consumes more CPU
// default is 20 refreshes per second
var refresh_rate = 20;
// cette fonction va faire apparaitre ou disparaitre le panneau.
function fadePanel(which, show)
{
// gets the control panel
var panel = document.getElementById("panel_"+which);
if (!panel) {
return false;
}
// clear any existing timeout, so you can click very quickly on the same
// control button, the panel will move from current position
if (panel.timeout) {
clearTimeout(panel.timeout);
}
// always dispay the panel while moving
panel.style.display = "block";
if (!panel.counter) {
panel.counter = 0;
}
// maximum offset for moving the panel
var max = 664;
// get actual counter, so the position of the panel in the fade
var opacity = panel.counter;
// avoid flicker when opacity changes to 100%
if (opacity >= 100) opacity = 99;
else if (opacity <= 0) opacity = 0;
panel.style.MozOpacity = (opacity / 100);
panel.style.filter = "Alpha(opacity="+(3 * opacity / 4)+")";
// sets the next position
//var left = - Math.pow(panel.counter - 100, 10) / Math.pow(55, 10);
var height = (panel.counter * 300)/100;
var width = (panel.counter * 664)/100;
// ICI ICI ICI ICI ICI ICI ICI
panel.style.height = height+"px";
panel.style.width= width+"px";
panel.style.margin = "auto";
// panel is fading in
if (show) {
// end of fade
if (panel.counter >= 99) {
return true;
}
// increment counter
panel.counter += fadein_speed;
// panel is fading out
} else {
// end of fade, hide the panel
if (panel.counter <= 0) {
panel.style.display = "none";
return true;
}
// decrement counter
panel.counter -= fadeout_speed;
}
// recursive call
panel.timeout = setTimeout("fadePanel('"+which+"', "+show+");", refresh_rate);
return true;
} |
dans la fonction fadePanel, là où j'ai mis ICICICICICICIC, c'est à ce niveau que les modifications de hauteur et largeur se font.
Mais de cette manière, les 2 augmentent en meme temps.
l'idée est que l'opacité, elle, soit progressive comme maintenant mais sur l'entièreté du process, vers le 75% quand la hauteur est faite et à 100% quand la largeur est OK, je sais pas si je suis clair ... :)
Est-ce que quelqu'un pourrait m'aider à finaliser cette fonction, j'ai envie d'apprendre, mais je manque d'expérience. Je cherche pas la réponse toute faite. ^^
en tous cas merci d'avance
