Faire disparaitre progressivement une ligne d'un tableau

**mathieu** · 06/05/2014, 12h02

Bonjour,

J'aimerai faire disparaitre progressivement une ligne d'un tableau.
J'ai essayé la librairie JQuery qui modifie l'attribut "height" mais la disparition se fait d'un coup.
Voilà mon code de test :

Code :

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

1
2
3
4
5
$(document).ready(function(){
    $(".btn1").click(function(){
        $(".disparaitre").slideUp(3000);
    });
});

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
<body>
<button class="btn1">Slide up</button>
<table>
    <tr>
        <td>a1</td><td>b1</td>
    </tr>
    <tr class="disparaitre">
        <td>a2</td><td>b2</td>
    </tr>
    <tr>
        <td>a3</td><td>b3</td>
    </tr>
</table>
<p>
    contenu balise "p" 1
</p>
<p class="disparaitre">
    contenu balise "p" 2
</p>
<p>
    contenu balise "p" 3
</p>
</body>

on voit que pour la balise "p", cela se fait bien et j'aimerai faire la même chose avec la ligne du tableau.

Est ce que vous avez des idées pour faire le même effet ?

**ilalaina** · 06/05/2014, 12h30

Bonjour,

Si tu definis explicitement la hauteur height de ta ligne ca devrait marcher.

**JérémieL** · 06/05/2014, 12h32

Bonjour,

En effet, les méthodes d'animations slideUp et slideDown ne fonctionnent pas très bien sur les lignes de tableaux.

Dans le bouquin Learning jQuery on peut lire ceci :

Table rows present particular obstacles to animation, since browsers use different values (table-row and block) for their visible display property. The .hide() and .show() methods, without animation, are always safe to use with table rows. As of jQuery version 1.1.3, .fadeIn() and .fadeOut() can be used as well.

Un fadeOut() serait plus adapté dans ton cas ?

**mathieu** · 07/05/2014, 19h38

Envoyé par JérémieL

Un fadeOut() serait plus adapté dans ton cas ?

cet effet fonctionne avec mes tests mais c'est surtout l'effet d'écrasement de la ligne qui m'intéressait

si la limitation se situe au niveau des navigateurs cela veut surement dire que ce n'est pas faisable actuellement.
je mets "résolu" quand même et dans mes prochains projets je me rappellerai de ne pas utiliser les tableaux si j'ai besoin de cet effet

Faire disparaitre progressivement une ligne d'un tableau

jQuery

Vue hybride

Discussions similaires

Partager

Partager