Question

我使用fadeIn在用户点击后展开表格中的行。在Chrome甚至IE中一切正常，但它在Firefox 15.0.1中不起作用。在FF中，当扩展行消失后，它的背景会闪烁一次。

这是我的代码：

$('.patients-items-item').click(function() {
    var item = $(this).next('.toggle-item');

    if (item.is(":visible")) {
        item.hide();
    } else {
        item.fadeIn();
    }
});

HTML：

<table class="patients-table">
    <tbody class="patients-items">
        <tr class="patients-items-item">
            <td>
                <span class="button collapsed"></span>
            </td>
            <td>
                Text
            </td>
            <td >
                Text2
            </td>
        </tr>
        <tr class="toggle-item">
            <td colspan="3" class="patients-studies-empty">
                Text3
            </td>
        </tr>
    </tbody>
</table>

查看Fiddle。

在调查期间，我发现这种行为仅存在于表格中。如果我使用divs代码执行相同操作，则在所有浏览器中都可以正常运行。

任何建议都会有所帮助。

Answer 1

在jQuery中，您可以使用 toggle（）函数来获取所需的行为。

参见此处的示例：

http://jsfiddle.net/83tNC/

$('.patients-items-item').on('click', function() {

    $(this).next('.toggle-item').toggle('fade');

});

Answer 2

你为什么不试试

item.stop().fadeIn();

此外，如果您正在切换，为什么不使用：

item.stop().fadeToggle("slow", "linear");

jQuery fadeIn在Firefox中闪烁

2 个答案: