[jQuery] Плавное разворачивание <tr>

0

1

Имеется такой код:

<table width="100%">
  <tr>
    <th>Column 1</th>
    <th>Column 2</th>
  </tr>
  <tr class="class-name" style="display: none">
    <td>...</td>
    <td>...</td>
  </tr>
</table>

<a href="#" onclick="$('.class-name').slideToggle(); return false">Link</a>

Собственно, проблема: при клике на ссылку строчка появляется и исчезает, но совсем без анимации. В чём проблема, как решить?

Ссылка

←	javascript v8, v8cgi, mod_v8cgi.so

исходники игрушки python google app engine

→

Гляньте на вот такой вариант.

wbrer ★★★
(02.12.10 23:47:57 MSK)

Следует задать себе вопрос «а откуда функция знает, какая скорость анимации мне нужна?»

И потом немедленно почитать о параметрах используемой функции, а заодно и о том, что такое «unobtrusive javascript».

thesis ★★★★★
(02.12.10 23:50:41 MSK)

Ответ на: комментарий от wbrer 02.12.10 23:47:57 MSK

> Гляньте на вот такой вариант.

Там указывается height строки, а мне этого надо избежать. Я нашёл вот такую статью: http://habrahabr.ru/blogs/jquery/72137/. Очень похоже на мою проблему, но как применить этот фикс к строке таблицы не знаю, у меня глюк всё так же остаётся.

fedyan
(02.12.10 23:59:10 MSK) автор топика

Ссылка

Ответ на: комментарий от thesis 02.12.10 23:50:41 MSK

> Следует задать себе вопрос «а откуда функция знает, какая скорость анимации мне нужна?»

Дефолтное значение скорости анимации, если не указать необязательный параметр скорости. Впрочем, даже если его указать - ничего не изменится.

И потом немедленно почитать о параметрах используемой функции, а заодно и о том, что такое «unobtrusive javascript».

А что, собственно, не устраивает? Моя цель была не запостить сюда весь проект, а в как можно меньшем куске кода показать суть проблемы, чтобы понятна была с одного взгляда.

fedyan
(03.12.10 00:02:08 MSK) автор топика

Ответ на: комментарий от fedyan 03.12.10 00:02:08 MSK

<a href="" class="btn-slide">Link</a>

<script type="text/javascript">
$(document).ready(function(){
    $(".btn-slide").click(function(){
        $("#slid").slideToggle("slow");
        $(this).toggleClass("active"); return false;
    });
});
</script>

<table width="100%">
  <tr>
    <th>Column 1</th>
    <th>Column 2</th>
  </tr>
  <tr id="slid" style="display: none">
    <td>...xxxxxxxxxxxxxxxxxxxx</td>
    <td>...xxxxxxxxxxxxxxxxxxxxx</td>
  </tr>
</table>

Может быть вот так попробуете? А что за браузер? У меня и в вашем варианте анимация есть...

wbrer ★★★
(03.12.10 00:20:37 MSK)

Ответ на: комментарий от wbrer 03.12.10 00:20:37 MSK

> Может быть вот так попробуете? А что за браузер? У меня и в вашем варианте анимация есть...

Тоже не работает. Браузеры - Opera 10.63, Firefox 3.6.12, Chromium 7. Doctype указывал - XHTML 1.0 Strict и HTML5, и вообще без них - одинаково всё.

fedyan
(03.12.10 00:30:42 MSK) автор топика

Ответ на: комментарий от fedyan 03.12.10 00:02:08 MSK

Ну тады странно. Посмотрел - умвр, опера 11, хром 7.0.517.44, лиса 3.6.12, жыкуери 1.2.6. Правда, на одной строчке текста «анимация» прктически ннезаметна, ибо тормоза.

thesis ★★★★★
(03.12.10 00:32:34 MSK)