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 : Sélectionner tout - Visualiser dans une fenêtre à part
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