slideDown() jQuery n'est pas fluide

Invité · 18/06/2013, 15h18

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

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.

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

**Bovino** · 18/06/2013, 15h38

Envoyé par Croconino

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

Nom : ampoule.jpg
Affichages : 117
Taille : 68,3 Ko

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

Invité · 18/06/2013, 15h56

Voilà le code HTML :

Code html :

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
<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 css :

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
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 :

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
$(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();
        }
    });
 
});

**Bovino** · 18/06/2013, 16h13

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

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.

Invité · 18/06/2013, 16h18

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 !

Invité · 20/06/2013, 13h06

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

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...

**Xeuch** · 20/06/2013, 15h35

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 :

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