jQuery fadeIn在Firefox中闪烁

问题描述

用户点击后，我正在使用fadeIn来扩展表格中的行.一切都可以在Chrome甚至IE中正常运行，但在Firefox 15.0.1中则无法正常运行.在FF中，展开的行消失后，背景闪烁一次.

I am using fadeIn to expand row in the table after user clicks. Everything works correct in Chrome and even IE, but it doesn't work in Firefox 15.0.1. In FF after expanded row is faded in it's background blinks one time.

这是我的代码:

$('.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>

查看小提琴.

在调查过程中，我发现这种行为仅存在于表中.如果我对divs执行相同的操作，则代码将在所有浏览器中正常工作.

During investigation I have found that such behavior is present only in tables. If I do the same with divs code will work correct in all browsers.

任何建议都会有所帮助.

Any suggestions will be helpful.

推荐答案

在jQuery中，您可以使用 toggle()函数来获取所需的行为.

In jQuery you can use the toggle() function to get the behavior that you want.

在此处查看示例:

http://jsfiddle.net/83tNC/

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

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

});​

这篇关于jQuery fadeIn在Firefox中闪烁的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！