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报告的处于why状态的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中发生了吗？无论哪种方式，我猜你在浏览器添加默认边框时丢失了一个像素。我不知道为什么这会在每一次滑动中都添加边界，但我相信这里的其他人可以发现这一点。

最后，我不熟悉你的选择器语法。您正在选择td和tr，如下所示：

  $('<tr />)

和$(')

而不是：

  $('tr')

和

  $('td')

有什么原因吗？