jQuery in $('tr').slideDown()
4 naročniki
4 naročniki
Se je kdo od vas že igral z animacijo vrstic v tabeli z jQuery?
Problem je v tem, da jQueryjev engine ob uporabi slideDown() animacije določi na TR elementu stil "display:block", ki pa seveda iz očitnih razlogov razsuje layout.
Googlanje mi ne pomaga, naletim le neskončnokrat na ta isti problem, brez kakšne pametne rešitve, ki ne bi pokvarila validnosti kode.
Je že kdo od vas pogruntal kakšen hack ali workaround, ki bi učinkovito in elegantno rešil ta problem?
25 odgovorov
Zanimiva ideja, jo bom šel mogoče celo preizkusit, predvsem iz firbca, namreč, tudi če bi to rešilo problem, ga ne bi rešilo v IE6, kar mi je pa trenutno bolj kot ne neuporabno :)
Ja saj to da če se odrečeš IE6, deluje tudi na tak način:
$('#1').css({'display':'table-row'}).slideDown();
Id je od celotnega rowa. Ampak za IE6 pa še ne vem kako bi to obšel :D
Pa spet mal zabluzu :D V bistvu se slide down ne izvede na prikazanem objektu :D LOL!
mogoče kaj nisem prov razumu ampak na hitro:
$('tr').css({'display':'none'}).slideDown().css({'display':'table-row'});
b00mbar, tole sploh ne more ničesar rešiti, ker se tisti css({'display':'table-row'}) zgodi pred zaključkom animacije, zadeva ne deluje, pa predvidevam, da je nisi niti preizkusil, preden si jo napisal tukaj :)
Tudi če bi zadevo poskušal rešiti z uporabo callbacka...
$('tr').css({'display':'none'}).slideDown('slow', function() {$(this).css({'display':'table-row'});});
... ne rešiš prav dosti, ker se vsa animacija dogaja, ko je "display" TR elementa "block", na koncu se pa sicer layout popravi, vendar vsa animacija izgleda dokaj razsuta :P
Sam sem prišel do te rešitve, da delaš potem callback table-row, ko enkrat slajdaš tabelo, če ni nekega ozadja je to skoraj sprejemljivo, če že mora bit nek slide (izgleda tako, da se vrednosti pokažejo s pomočjo slideDown ena zraven druge, in se nato razporedijo glede na širino stolpca).
Sicer pa lepše izgleda sam fade, ki pa nima težav z block.
carli, ja, saj ena od predlaganih rešitev, ki sem jih odkril s pomočjo googlanja, je, naj uporabim fadeIn(), je pa žal za moje konkretne potrebe nesprejemljiva :P
ja, Vini nisem nič sprobal, saj sem rekel - na hitro.
mogoče lahko probaš z animate funkcijo, in narediš iz height:0, v height:100px in overflow:hidden. bi moral biti zlo podoben efekt.
sem se pa zdele spomnu, kaj bi to lahko blo.. hočeš narest poste na tem forumu zaprte, če so spammy? :)