плавное сворачивание тега tbody
доброго времени суток, подскажите пожалуйста есть ли способ плавно свернуть(slideUp) тег tbody. видел вариант с оборачиванием содержимого каждой ячейки в div и сворачиванием всех этих div'ов, но это слишком медленно, да и эффект совершенно иной получается.
|
Euler,
если очень хочется то можно, надо только css подшаманить ... может есть варианты лучше кто знает подскажите :write:
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<title>demo</title>
<style>
td{
border: #000000 1px dashed;
}
table {
display: inline-block;
overflow: hidden;
}
td{
width: 100px;
height: 25px;
}
.cl{
width: 300px;
background: #FFFACD
}
tbody td:nth-last-child(2n+1) {
background: #f0f0f0;
}
</style>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
<table style="border: #FF0000 1px solid; border-collapse: collapse">
<thead align="center">
<tr>
<td colspan="3" class="cl"> click </td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td>2</td>
</tr>
</tbody>
</table>
<script>
var h_table = $('table').height(), h_thead = $('thead').height(), n = 0;
$('thead').click(function ()
{
$('table').animate({height: (n^=1)? h_thead:h_table}, 1000);;
})
</script>
</body>
</html>
|
| Часовой пояс GMT +3, время: 15:36. |