jQuery in $('tr').slideDown()
 
Vini 15. sep 2009 13:56:09 Pridružen od:
1. sep 2006
6612 objav
5234 611 56
#1

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?


všeč(0) ni všeč(0) spam(0)
 
FrEaKmAn 15. sep 2009 14:18:50 Pridružen od:
2. dec 2007
303 objav
175 59 0
#2

iz glave, ti vedno lahko preprečiš inline still tako da v css določiš


!important
všeč(1) ni všeč(0) spam(0)
 
Vini 15. sep 2009 14:31:56 Pridružen od:
1. sep 2006
6612 objav
5234 611 56
#3

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


všeč(0) ni všeč(0) spam(0)
 
carli 15. sep 2009 14:56:02 Pridružen od:
5. avg 2008
1258 objav
583 54 17
#4

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!


všeč(1) ni všeč(0) spam(0)
 
Vini 16. sep 2009 14:12:03 Pridružen od:
1. sep 2006
6612 objav
5234 611 56
#5

Ne, to ne more delat, najprej mora biti element skrit, da ga lahko slidedownaš :)


všeč(0) ni všeč(0) spam(0)
 
b00mbar 17. sep 2009 11:37:54 Pridružen od:
18. jun 2008
350 objav
554 127 18
#6

mogoče kaj nisem prov razumu ampak na hitro:



$('tr').css({'display':'none'}).slideDown().css({'display':'table-row'});


všeč(0) ni všeč(0) spam(0)
Garantirano najhitrejše pure SSD Reseller gostovanje ( PHP7.1, Opcache, Nginx, MariaDB, Let's encrypt) | Brezplačna selitev strani in pošte | 400+ domen po izjemnih cenah
www.neoserv.si
 
Vini 17. sep 2009 11:48:08 Pridružen od:
1. sep 2006
6612 objav
5234 611 56
#7

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


všeč(0) ni všeč(0) spam(0)
 
carli 17. sep 2009 12:02:51 Pridružen od:
5. avg 2008
1258 objav
583 54 17
#8

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.


všeč(0) ni všeč(0) spam(0)
 
Vini 17. sep 2009 12:09:25 Pridružen od:
1. sep 2006
6612 objav
5234 611 56
#9

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


všeč(0) ni všeč(0) spam(0)
 
b00mbar 17. sep 2009 13:38:12 Pridružen od:
18. jun 2008
350 objav
554 127 18
#10

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.


všeč(0) ni všeč(0) spam(0)
Garantirano najhitrejše pure SSD Reseller gostovanje ( PHP7.1, Opcache, Nginx, MariaDB, Let's encrypt) | Brezplačna selitev strani in pošte | 400+ domen po izjemnih cenah
www.neoserv.si
 
 

🔒 Za odgovor na to temo se moraš prijaviti.

Prijavi se