Ошибка jQuery slideUp?

Question

Я возился с некоторыми вещами jQuery для макета и заметил какое-то странное поведение. Я надеюсь, что кто-то здесь может пролить свет на это.

Это все макет / тестовый код, поэтому, пожалуйста, извините за неряшливость.

Итак, у меня есть таблица, которую я использую вместе с подключаемым модулем jQuery: http://www.datatables.net/

Моя разметка таблицы выглядит следующим образом:

            <table id="dexterIndex">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Col 2</th>
                    <th>Col 3</th>
                    <th>Col 4</th>
                    <th>Col 5</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Test 1</td>
                    <td>Yes</td>
                    <td>2009-2010</td>
                    <td>Fall 2010</td>
                    <td>Fall 2010</td>
                </tr>
                <tr>
                    <td>Test 2</td>
                    <td>No</td>
                    <td>2009-2010</td>
                    <td>Fall 2010</td>
                    <td>Fall 2010</td>
                </tr>
                <tr>
                    <td>Test 3</td>
                    <td>Yes</td>
                    <td>2009-2010</td>
                    <td>Fall 2010</td>
                    <td>Fall 2010</td>
                </tr>
                <tr>
                    <td>Test 4</td>
                    <td>No</td>
                    <td>2009-2010</td>
                    <td>Fall 2010</td>
                    <td>Fall 2010</td>
                </tr>
                <tr>
                    <td>Test 5</td>
                    <td>No</td>
                    <td>2009-2010</td>
                    <td>Fall 2010</td>
                    <td>Fall 2010</td>
                </tr>
                <tr>
                    <td>Test 6</td>
                    <td>No</td>
                    <td>2009-2010</td>
                    <td>Fall 2010</td>
                    <td>Fall 2010</td>
                </tr>
                <tr>
                    <td>Test 7</td>
                    <td>Yes</td>
                    <td>2008-2009</td>
                    <td>Fall 2009</td>
                    <td>Fall 2009</td>
                </tr>
            </tbody>
        </table>

Теперь функциональность, для которой я работаю: При наведении измените цвет фона строки Если вы зависли более чем на «х» секунд, сдвиньте нижнюю строку для строки, над которой зависаете.

Вот скриншот эффекта, работающего корректно (в общем):

Покинув ряд мышью, подряд сдвигается вверх.

Это все работает, но кажется, что каждый раз, когда он скользит вверх, он падает примерно на пиксель. Вот изображение после зависания / отмена 10 раз. Это таблица в состоянии после скольжения подстроки (это означает, что это не просто подстрока, отображаемая без текста).

Если я изменяю slideUp / slideDown на fadeIn / fadeOut, все работает нормально, и я не получаю лишних пикселей. (Я, вероятно, в конечном итоге просто буду использовать фейды, но мне интересно это поведение).

Вот что Safari сообщает о DOM в состоянии ошибки (также, почему я не могу скопировать / вставить в Safari Web Inspector?):

И, наконец, вот несколько небрежных jQuery, которые обрабатывают реальные движущиеся части:

<script language="javascript" type="text/javascript">
        $(document).ready(function() {
            $('#dexterIndex').dataTable()
            $('#dexterIndex tbody tr')
                .hover(function() {

                    var table_row = this
                    table_row.hovering = true
                    window.setTimeout(function() {
                        if (table_row.hovering) {
                            $('.school-info').slideUp('fast', function() {
                                $(this).remove()
                            })
                            table_row.hovering = false
                            var tr = $('<tr />').attr({'class': 'school-info',})
                            $(table_row).after(tr)
                            $('<td />')
                                .attr({
                                    'colspan': 5
                                })
                                .css({
                                    'display': 'none'
                                })
                                .text("Sub Row")
                                .appendTo(tr)
                                .slideDown('fast')
                        }

                    }, 2000)
                    $(this).children().each(function() {
                        (this.oldColor === undefined)? this.oldColor = $(this).css('background-color'): null;    
                        $(this).css({'background-color': '#f3ffc0'})
                    })
                },
                function() {
                    this.hovering = false
                    $('.school-info').slideUp('fast', function() {
                        $(this).remove()
                    })
                    $(this).children().each(function() {
                        $(this).css({'background-color': this.oldColor})
                    })
                })
        })

TL; DR: slideUp каждый раз перемещается на один пиксель меньше, у fadeOut проблем нет.

Если кто-нибудь сможет пролить свет на эту проблему, это будет с благодарностью.

Answer 1

Пара вопросов / идей:

Кажется, что этот метод используется для пользовательского интерфейса / богатства, то есть, что подстроки не вычисляются, когда пользователь наводит курсор мыши, и не создаются из вызова ajax и т. Д. Но вы не скрываете и не скрываете данные, но вместо этого создавая его при наведении, а затем удаляя его. Это потенциально очень недоступно и добавляет дополнительные издержки для браузера-скрипта.

Так что я бы посоветовал загрузить таблицу с фактическими вложенными строками и сделать так, чтобы ваш jquery скрывал их во время загрузки. Вы можете просто добавить класс, такой как "sub_row" в эти таблицы.

Во-вторых, это происходит только в Safari? Это происходит в Firefox? В любом случае, я думаю, вы теряете пиксель из браузера, добавляя границу по умолчанию. Я не знаю, почему это будет добавлять эту границу к каждому слайду, но я уверен, что кто-то еще может это заметить.

Наконец, я незнаком с вашим синтаксисом селектора. Вы выбираете td s и tr s как:

  $('<tr />)

и $ ( ')

вместо:

  $('tr')

и

  $('td')

Есть причина почему?