jQuery - zwijane wiersze i animacja - jak?

Forum Komputery
Odpowiedz
05.11.2012 16:09
1
odpowiedz
Telemach
106
Who am I?

jQuery - zwijane wiersze i animacja - jak?

Hej!

Mam mniej więcej taką tabelkę:

<table>
<tr><td>Nagłówek</td></tr>
<tr><td><div>Jakaś zawartość</div></td></tr>
<tr><td>Nagłówek</td></tr>
<tr><td><div>Jakaś zawartość</div></td></tr>
<tr><td>Nagłówek</td></tr>
<tr><td><div>Jakaś zawartość</div></td></tr>
</table>

I teraz chciałbym, aby po kliknięciu w nagłówek, wiersz poniżej (z divem) był zawijany, ale z płynną animacją.

Póki co, mam coś takiego, co owszem zawija, ale niestety nie mam slide'a (fade jest, ale nie ro/zwija płynnie):

<script type="text/javascript">
$(document).ready(function()‹
$("#report > tbody > tr:odd").addClass("odd");
$("#report > tbody > tr:not(.odd)").hide();
$("#report > tbody > tr:first-child").show();


$("#report > tbody > tr.odd").click(function()‹
$(this).next("tr").slideToggle(200);
$(this).find(".arrow").toggleClass("up");
›);
//$("#report").jExpand();
›);
</script>

<table id="report">
<tbody>
<tr>
<th>Lorem ipsum</th>
<th>Lorem ipsum</th>
<th>Lorem ipsum</th>
<th>Lorem ipsum</th>
</tr>
<tr>
<td>Lorem ipsum</td>
<td>Lorem ipsum</td>
<td>Lorem ipsum</td>
<td>Lorem ipsum</td>
</tr>
<tr>
<td colspan="4">
321313212313213131313

54454446
</td>
</tr>
<tr>
<td>Lorem ipsum</td>
<td>Lorem ipsum</td>
<td>Lorem ipsum</td>
<td>Lorem ipsum</td>
</tr>
<tr>
<td colspan="4">
<table width="335" >
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr id="love">
<td>456;</td>
<td>jayy</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>

</td>
</tr>
</tbody>
</table>

05.11.2012 16:51
maviozo
2
odpowiedz
maviozo
244
autor zdjęć

I generalnie nie będzie zwijać. Wbudowana funkcja slideDown i slideUp niestety nie jest idealna. Musisz napisać własną.

05.11.2012 17:03
3
odpowiedz
Telemach
106
Who am I?

Przerobiłem jQuery trochę:
<script type="text/javascript">
$(document).ready(function()‹
$("#report > tbody > tr:odd").addClass("odd");
$("#report > tbody > tr:not(.odd) div").hide();
$("#report > tbody > tr:first-child").show();


$("#report > tbody > tr.odd").click(function()‹
$(this).next("tr").children("td").children("div").slideToggle();
$(this).find(".arrow").toggleClass("up");
›);
//$("#report").jExpand();
›);
</script>

Ale niestety dalej haczy :/
W "ukryte" wiersze wpakowałem diva.

05.11.2012 17:13
maviozo
4
odpowiedz
maviozo
244
autor zdjęć

Animacja będzie skuteczniejsza, jeżeli każdorazowo wymusisz animację przy użyciu .animate() podając jako jeden z obiektów "height".

Forum Forum Komputery
Odpowiedz

GRYOnline.pl:

Facebook GRYOnline.pl Instagram GRYOnline.pl X GRYOnline.pl Discord GRYOnline.pl TikTok GRYOnline.pl Podcast GRYOnline.pl WhatsApp GRYOnline.pl LinkedIn GRYOnline.pl Forum GRYOnline.pl

tvgry.pl:

YouTube tvgry.pl TikTok tvgry.pl Instagram tvgry.pl Discord tvgry.pl Facebook tvgry.pl