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>

现在，我要实现的功能是： 悬停时更改行背景颜色 如果悬停超过“x”秒，则向下滑动悬停所在行的子行。

这是正常工作的效果截图（一般）：

用鼠标离开该行时，子行会向上滑动。

这一切都有效，但似乎每次向上滑动时，它都会减少大约一个像素。这是悬停/取消悬停 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

几个问题/想法：

似乎这种技术正在用于 UI/丰富性，这意味着当用户悬停时不会计算子行，也不会从 ajax 调用等中创建子行。但是您并没有隐藏和取消隐藏数据，而是在悬停时创建它，然后再将其删除。这可能非常难以访问，并为浏览器脚本增加了额外的开销。

所以我建议使用实际子行加载表，并让您的 jquery 在加载期间隐藏它们。您可以简单地向这些表中添加一个类似“sub_row”的类。

其次，这只发生在 Safari 中吗？它发生在Firefox中吗？无论哪种方式，我猜你会从浏览器中丢失一个像素，添加一个默认边框。我不知道为什么这会继续在每个幻灯片上添加该边框，但我相信这里的其他人可以发现这一点。

最后，我不熟悉您的选择器语法。您正在选择 tds 和 trs 为：

  $('<tr />)

和 $(')

代替：

  $('tr')

和

  $('td')

有什么原因吗？