Come utilizzare la funzione slideDown (o show) su una riga della tabella?

215

Sto cercando di aggiungere una riga a una tabella e di far scorrere quella riga in vista, tuttavia la funzione di scorrimento sembra aggiungere un display: stile di blocco alla riga della tabella che incasina il layout.

Qualche idea su come aggirare questo?

Ecco il codice:

$.get('/some_url', 
  { 'val1': id },

  function (data) {
    var row = $('#detailed_edit_row');
    row.hide();
    row.html(data);
    row.slideDown(1000);
  }
);

— Greg
fonte

Deve essere un tavolo? Penso che sia molto più facile senza il tavolo.

— MrChrister,

fadeIne fadeOutlavora su file di tabelle e crea un piacevole effetto visivo alternativo (testato solo su Firefox)

— Savage

296

Le animazioni non sono supportate nelle righe della tabella.

Da "Learning jQuery" di Chaffer e Swedberg

Le righe di tabella presentano particolari ostacoli all'animazione, poiché i browser utilizzano valori diversi (riga di tabella e blocco) per la loro proprietà di visualizzazione visibile. I metodi .hide () e .show (), senza animazione, sono sempre sicuri da usare con le righe della tabella. A partire dalla versione 1.1.3 di jQuery, è possibile utilizzare anche .fadeIn () e .fadeOut ().

Puoi racchiudere i tuoi contenuti td in un div e usare slideDown su quello. Devi decidere se l'animazione vale il markup extra.

— Emily
fonte

Funziona alla grande! C'è un altro gotcha minore: dovrai anche animare il riempimento delle celle, se ce n'è. Ma non è nemmeno un grosso problema.

— Adrian Grigore,

Puoi animare l'imbottitura in questo modo:$('tr').find('td').animate({padding: '0px'}, {duration: 200});

— Andrew,

@Emily: Potresti indicare linee specifiche della fonte jQuery? Sono tentato di hackerare la fonte per il mio progetto.

— Randomblue,

Non è una risposta diretta, ma ho scoperto che l'uso di fadeIn / fadeOut è quasi altrettanto buono nella maggior parte delle situazioni e sembra funzionare bene sulle righe della tabella.

— Phil LaNasa,

@PhilLaNasa All'inizio ero tipo "Nah, non andrà bene", ma poi l'ho provato ed è stato davvero bello! Grazie per il viaggio!

— Kenton de Jong,