slideDown() jQuery n'est pas fluide

Bonjour,

J'utilise un slideDown() pour "ouvrir" un fieldset mais cela n'est pas fluide. Lors de la "montée" avec le slideUp(), il n'y a aucun problème, tout est fluide.
En revanche lors de l'ouverture de mon bloc, jusqu'à la moitié cela reste fluide mais ensuite jQuery fait une micro pause et termine l'ouverture du bloc d'un coup, comme un bond.
Assez difficile de se le représenter en effet :mrgreen:

J'ai lu pas mal de choses disant que ce serait causé par le padding ou alors du fait qu'il faille utiliser le plugin easing pour fluidifier tout cela.
J'ai testé sans padding : même problème !
Concernant le plugin easing, je ne suis pas parvenu à l'utiliser concrètement. :nono:

si vous avez de quoi m'éclairer je suis preneur ! :ccool:

1 pièce(s) jointe(s)

Citation:

Envoyé par Croconino

si vous avez de quoi m'éclairer je suis preneur ! :ccool:

Pièce jointe 121218

:dehors:

Plus sérieusement, un peu de code permettrait probablement de t'aider un peu mieux...

Voilà le code HTML :

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
<div id="homeLeftContent">
                <div>
                    <fieldset>
                        <legend>Titre 1</legend>
                        <p>
                            Vita est illis semper in fuga uxoresque mercenariae conductae ad tempus ex pacto atque, ut sit species matrimonii, dotis nomine futura coniunx hastam et tabernaculum offert marito, post statum diem si id elegerit discessura, et incredibile est quo ardore apud eos in venerem uterque solvitur sexus.
                        </p>
                    </fieldset>
 
                    <fieldset>
                        <legend>Titre 2</legend>                
                        <p>
                            Vita est illis semper in fuga uxoresque mercenariae conductae ad tempus ex pacto atque, ut sit species matrimonii, dotis nomine futura coniunx hastam et tabernaculum offert marito, post statum diem si id elegerit discessura, et incredibile est quo ardore apud eos in venerem uterque solvitur sexus.
                        </p>
 
                    </fieldset>
 
                    <fieldset class="homeLeftContentChanged">
                        <legend>Titre 3</legend>                
                        <p>
                            Vita est illis semper in fuga uxoresque mercenariae conductae ad tempus ex pacto atque, ut sit species matrimonii, dotis nomine futura coniunx hastam et tabernaculum offert marito, post statum diem si id elegerit discessura, et incredibile est quo ardore apud eos in venerem uterque solvitur sexus.
                        </p>
                    </fieldset>                
 
                    <fieldset class="homeLeftContentChanged">
                        <legend>Titre 4</legend>
                        <p>
                            Vita est illis semper in fuga uxoresque mercenariae conductae ad tempus ex pacto atque, ut sit species matrimonii, dotis nomine futura coniunx hastam et tabernaculum offert marito, post statum diem si id elegerit discessura, et incredibile est quo ardore apud eos in venerem uterque solvitur sexus.
                        </p>
                    </fieldset>
 
                    <fieldset class="homeLeftContentChanged">
                        <legend>Titre 5</legend>
                        <p>
                            Vita est illis semper in fuga uxoresque mercenariae conductae ad tempus ex pacto atque, ut sit species matrimonii, dotis nomine futura coniunx hastam et tabernaculum offert marito, post statum diem si id elegerit discessura, et incredibile est quo ardore apud eos in venerem uterque solvitur sexus.
                        </p>                   
                    </fieldset>    
 
                    <fieldset class="homeLeftContentChanged">
                        <legend>Titre 6</legend>
                        <p>
                            Vita est illis semper in fuga uxoresque mercenariae conductae ad tempus ex pacto atque, ut sit species matrimonii, dotis nomine futura coniunx hastam et tabernaculum offert marito, post statum diem si id elegerit discessura, et incredibile est quo ardore apud eos in venerem uterque solvitur sexus.
                        </p>
                    </fieldset>   
 
                    <fieldset class="homeLeftContentChanged">
                        <legend>Titre 7</legend>
                        <p>
                            Vita est illis semper in fuga uxoresque mercenariae conductae ad tempus ex pacto atque, ut sit species matrimonii, dotis nomine futura coniunx hastam et tabernaculum offert marito, post statum diem si id elegerit discessura, et incredibile est quo ardore apud eos in venerem uterque solvitur sexus.
                        </p>
                    </fieldset>   
 
                    <fieldset class="homeLeftContentChanged">
                        <legend>Titre 8</legend>
                        <p>
                            Vita est illis semper in fuga uxoresque mercenariae conductae ad tempus ex pacto atque, ut sit species matrimonii, dotis nomine futura coniunx hastam et tabernaculum offert marito, post statum diem si id elegerit discessura, et incredibile est quo ardore apud eos in venerem uterque solvitur sexus.
                        </p>
                    </fieldset>           
                </div>
            </div>

Le CSS :

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
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
#homeLeftContent {
    float: left;
    overflow: hidden;
    margin: 0 4px 0 0;
    width: 473px;
    height: 571px;
    -webkit-border-radius: 0 0 0 4px;
    -moz-border-radius: 0 0 0 4px;
    -ms-border-radius: 0 0 0 4px;
    -o-border-radius: 0 0 0 4px;
    -khtml-border-radius: 0 0 0 4px;
    border-radius: 0 0 0 4px;
    background-color: #0080FF; /* BLUE */
    text-align: justify;
    color: #f1f3f2; /* LITE GREY */;
}
 
#homeLeftContent:hover {    
    overflow: auto;
    overflow-x: hidden;    
}
 
#homeLeftContent > div {
    width: 440px;
    padding: 0 0 10px 10px;
}
 
#homeLeftContent > div > fieldset {
    margin: 0 auto 10px;
    -webkit-border-radius: 16px;
    -moz-border-radius: 16px;
    -ms-border-radius: 16px;
    -o-border-radius: 16px;
    -khtml-border-radius: 16px;
    border-radius: 16px;
    border-color: transparent;
    background-color: #F1F3F2; /* LITE GREY */
    color: grey;
    box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.3) inset, 0px 2px 2px 0px rgba(255, 255, 255, 0.3);
    -webkit-box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.3) inset, 0px 2px 2px 0px rgba(255, 255, 255, 0.3);
    -moz-box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.3) inset, 0px 2px 2px 0px rgba(255, 255, 255, 0.3);
    -o-box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.3) inset, 0px 2px 2px 0px rgba(255, 255, 255, 0.3);
}
 
#homeLeftContent > div > fieldset:last-child {
    margin-bottom: 0;
}
 
#homeLeftContent > div > fieldset > legend {
    padding: 4px 12px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
    -khtml-border-radius: 4px;
    border-radius: 4px;
    box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(255, 255, 255, 0.2) inset;
    -webkit-box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(255, 255, 255, 0.2) inset;
    -moz-box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(255, 255, 255, 0.2) inset;
    -o-box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(255, 255, 255, 0.2) inset;
    background-color: grey;
    color: white;
    font-family: 'Carrois Gothic SC', sans-serif;
    cursor: pointer;
    -webkit-transition-property: text-shadow;
    -webkit-transition-duration: 0.1s;
    -webkit-transition-timing-function: linear;
    -moz-transition-property: text-shadow;
    -moz-transition-duration: 0.1s;
    -moz-transition-timing-function: linear;
    transition-property: text-shadow;
    transition-duration: 0.1s;
    transition-timing-function: linear;
}
 
#homeLeftContent > div > fieldset > legend:hover {
    text-shadow: 0px 0px 20px #f1f3f2 !important; /* LITE GREY */;
    -webkit-transition-property: text-shadow;
    -webkit-transition-duration: 0.1s;
    -webkit-transition-timing-function: linear;
    -moz-transition-property: text-shadow;
    -moz-transition-duration: 0.1s;
    -moz-transition-timing-function: linear;
    transition-property: text-shadow;
    transition-duration: 0.1s;
    transition-timing-function: linear;
}
 
#homeLeftContent > div > fieldset > p {
    margin: 0 auto;
}
 
.homeLeftContentChanged {
    padding: 0;
    border: none;
    box-shadow: none !important;
    -webkit-transition-property: padding;
    -webkit-transition-duration: 0.4s;
    -webkit-transition-timing-function: linear;
    -moz-transition-property: padding;
    -moz-transition-duration: 0.4s;
    -moz-transition-timing-function: linear;
    transition-property: padding;
    transition-duration: 0.4s;
    transition-timing-function: linear; 
}
 
.homeLeftContentChanged legend {
    margin: 0 auto !important;
    width: 100%;
    padding: 4px 0 !important;
    -webkit-transform: none !important;
    -moz-transform: none !important;
    -o-transform: none !important;
    transform: none !important;
    text-align: center;    
}
 
.homeLeftContentChanged legend:hover {
    text-shadow: 0px 0px 30px #f1f3f2; /* LITE GREY */ 
}

Et le jQuery :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
$(document).ready(function() {
 
    $('div#homeLeftContent fieldset:gt(1) p').hide();
 
    $('div#homeLeftContent fieldset legend').click(function() {
 
        if ($(this).parent().hasClass('homeLeftContentChanged')) {
            $(this).parent().toggleClass('homeLeftContentChanged');
            $(this).parent().find('p').slideDown();
        }
        else {
            $(this).parent().toggleClass('homeLeftContentChanged');
            $(this).parent().find('p').slideUp();
        }
    });
 
});

J'ai beau tester, je ne constate pas particulièrement de ralentissement... :koi:

Ensuite, il y a des choses à prendre en considération.
Une animation, quelle qu'elle soit, demande au navigateur de recalculer à chaque frame les dimensions et positions de nombreux éléments.
Cela implique que plus il y a d'éléments en jeu et plus les effets sont complexes et / ou combinés, plus cela demande de travail et il peut en résulter les lags que tu sembles constater.
C'est d'ailleurs une des raisons pour lesquelles les tables HTML sont particulièrement inadaptées aux effets.

Dans ton cas, tu combines des effets JavaScript avec des effets CSS (que ce soient les coins arrondis, les ombrages ou les transformations). Tout cela reste lourd à gérer pour ton navigateur.

En fait, ce bloc est contenu dans deux autres blocs donc un parmi eux qui est en overflow:auto sur le :hover.
Je pense en effet que cela doit lui imposer trop d'animations d'un coup. :?

Ce n'est pas grave, je m'y ferais.
En attendant, merci beaucoup d'avoir pris le temps de chercher ! :ccool:

Finalement j'ai trouver de quoi héberger mon site temporairement. :D

Si tu veux jeter un coup d'oeil pour voir et me dire ce que tu en penses :

http://valef.fr/sites/temp/content/home.php

C'est sur la page d'accueil, à gauche les parties qui s'ouvrent ne sont pas fluides du tout...

c'st bizarre j'ai testé sur ton site et je vois bien problème dont tu parle mais avec ton code j'ai l'ai testé en local sous Mozilla et IE et ça marche nickel essaie de faire du:

Code:

slideDown('medium');

pour voir...

Merci,

Mais c'est toujours de même sachant que avec medium la coupure est encore plus marquée :/