Question

尝试点击Chrome，IE，Firefox中的div，然后与Opera进行比较

你可以注意到，首先是所有＆lt; tr>元素被隐藏在一起，但它一个接一个地显示。

根据规格，哪种行为是正确的？如何强制Opera像其他浏览器一样？

代码：

<div> click </div>

<table>
  <tr><td>a</td></tr>
  <tr><td>b</td></tr>
  <tr><td>c</td></tr>
  <tr><td>d</td></tr>
  <tr><td>e</td></tr>
</table>


var sleep = function (ms) {
    var unixtime_ms = new Date().getTime();
    while(new Date().getTime() < unixtime_ms + ms) {}
}

$('div').click(function(){
    $('tr').each(function(){
        $(this).hide();
        sleep(200);
    })
})

Answer 1

因此，如果您只想隐藏行并将某些样式应用于可见行，为什么不在一步中隐藏它们呢？

$('div').click(function(){
    $('tr.rows-to-hide').hide();
    $('tr:not(.rows-to-hide)').css('background-color', 'blue');
});

修改我做了三个例子：

http://jsfiddle.net/nzzzH/8/ - ＆gt; .hide()中的each() - 循环

http://jsfiddle.net/nzzzH/10/ - ＆gt; .hide()马上

http://jsfiddle.net/nzzzH/10/ - ＆gt; .css('display', 'none')中的each() - 循环

所以在.hide()循环中使用each()确实是最慢的，不幸的是我无法找出这种行为的具体原因，我的猜测是歌剧在使用大量jQuery动画时有一个性能。我的提示是立即使用.hide()。

编辑2 我认为我的猜测是正确的：Why is opera animation so slow?

Answer 2

尝试用.css替换.hide（）（{'display'：'none'}）：

$('div').click(function(){
    $('tr').each(function(){
        $(this).css({'display':'none'});
    })
})

隐藏行时Opera不会冻结表

2 个答案: