jquery – 如何替换CSS /切换大量元素？

我有以下jQuery但它没有像我期望的那样表现.有大约700个div与类gr,所以隐藏它们需要一个明显的时间.我想做：

>单击“显示/隐藏发音”时,立即将该文本更改为“正在工作”
>等到隐藏/显示所有’div.gr’
>“工作”可以追溯到“显示/隐藏发音”

$(document).ready(function () {
 $('#togglePron').click(function() {
   $('#togglePron').html("Working...");
   $('div.gr').toggle();
   $('#togglePron').html("Show/hide Pronunciation");
  });
});
...
... 
<div class="pronlink" id="togglePron">Show/hide P</div>

<div class="gr">hai</div><div class="zi">A</div>
<div class="gr">nao</div><div class="zi">B</div>  
etc.

感谢Mike Lentini there’s a jsfiddle for this question.

This is the full page I’m working on

我观察到的行为是“显示/隐藏P”需要一个明显的时间来改变,然后它会短暂地改变为“工作”,然后它会回到“显示/隐藏”.那么jQuery将html()和.toggle()聚合在一起,而不是首先运行html()吗？

这似乎是浏览器特定的,因为在Opera中它做我想要的.在IE 7和Chrome 18中,行为如我所述.有没有办法让Chrome中我想要的行为发生？或者更好的方式来做我描述的事情？