Question

我正在为一个模型搞乱一些jQuery的东西，并注意到一些奇怪的行为。我希望这里有人可以对此有所了解。

这是所有的模型/测试代码，所以请原谅这些草率。

所以我有一个表，我正在使用jQuery datatable插件： 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'秒，则向下滑动要悬停的行的子行。

以下是效果正常工作的屏幕截图（一般情况下）： Correct Functionality

用一只鼠标离开行后，子行向上滑动。

这一切都有效，但似乎每次它向后滑动它都会缩短大约一个像素。这是悬停/悬停10次后的图像。这是子行向上滑动后的状态表（意味着它不仅仅是显示没有文本的子行）。

The Bug

如果我将slideUp / slideDown更改为fadeIn / fadeOut，一切正常，我没有额外的像素。（我可能最终会使用淡入淡出，但我对这种行为感到好奇）。

这就是safari在bug状态下报告DOM的原因（同样，为什么我不能在Safari Web Inspector中复制/粘贴？）： Safari Reports

最后，这里有一些草率的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')

有什么理由？

jQuery slideUp bug？

1 个答案: