jQuery切换，隐藏，显示 - Chrome覆盖错误 [英] jQuery toggle, hide, show - Chrome overlay bug

问题描述

这个问题是继续这个问题，我今天早些时候发布。

Chrome覆盖错误链接为 here

大部分细节我都在我的问题问题中发布以上）。所以在摆弄了代码之后，在一些stackoverflow成员的帮助下，我们发现这个问题不是脚本相关的，而是纯粹的CSS问题。

以下是我之前修改过的相同函数的3个不同版本JS版本1（原始版本） - 进度加载器可用于FF，Safari，但不适用于Chrome和IE

  function progressIndicator（value）{
 
 if（value）{
 $（ #progressIndicatorBackground）显示（）; 
} 
 else {
 $（＃progressIndicatorBackground）。hide（）; 
} 
} 
  

JS版本2 - 应用Chrome覆盖修复后 - 否

  function progressIndicator（value）{
 
 if（value）{ 
 $（＃progressIndicatorBackground）。show（）; 
 var TmpHeigh = $（＃progressIndicatorBackground）。css（'height'）; 
 $（＃progressIndicatorBackground）。css（'height'，parseFloat（TmpHeigh）-1）; 
} 
 else {
 $（＃progressIndicatorBackground）。hide（）; 
 
 
 
 
 $ b $ p 
 $ b 
 JS版本3  - 更改显示和隐藏功能以切换 - 这使得进度加载器可以在Chrome和IE上运行。但是，一旦我开始获取JSON内容，管道显示总是被设置为阻止。内容正确加载后，它不会回到显示：无。所以我在页面上一直有预加载器。
  function progressIndicator（value）{
 
 if（value）{
 $（＃progressIndicatorBackground）。toggle（）; 
 var TmpHeigh = $（＃progressIndicatorBackground）。css（'height'）; 
 $（＃progressIndicatorBackground）。css（'height'，parseFloat（TmpHeigh）-1）; 
} 
} 
  
我不知道下一步该做什么以及如何解决问题。我不在乎它是否是一个肮脏的修复程序。
解决方案
我认为 toggleClass（）可能会诀窍，请查看此小提琴。只需设置一个隐藏它的类，然后使用 display：none 之类的内容隐藏它，并在希望显示加载条或想要隐藏它时切换它。在我的例子中，我只是setTimeout而不是动画加载动画，但希望隐藏/显示方法将工作，无论如何。
 
This question is in continuation with this question, which I have posted earlier today.

Chrome overlay bug link is here

Most of the details I have posted in my eartlier question (Link provided above). So After fiddling around with the code and with some help from one of the stackoverflow member we have come to the decision that the problem is not scripting related rather it is purely CSS issue on Chrome.

Here are 3 different versions of the same function I modified earlier

JS version 1 (Original) - Progress loader works on FF, Safari but not on Chrome and IE
function progressIndicator(value) {

    if(value) {
        $("#progressIndicatorBackground").show();
    }
    else {
        $("#progressIndicatorBackground").hide();
    }
}
JS version 2 - After applying Chrome overlay fix  - No luck, still the same problem.
function progressIndicator(value) {

    if(value) {
        $("#progressIndicatorBackground").show();
        var TmpHeigh = $("#progressIndicatorBackground").css('height');
        $("#progressIndicatorBackground").css('height', parseFloat(TmpHeigh)-1);
    }
    else {
        $("#progressIndicatorBackground").hide();
    }
}
JS version 3 - changing show and hide function to toggle - This makes the progress loader works on Chrome and IE as well. But the display attubite is always set to block once I start fetching the JSON content. After the content is loaded properly, it doesn't set back to display:none. So I have pre-loader on the page all the time.
function progressIndicator(value) {

    if(value) {
        $("#progressIndicatorBackground").toggle();
        var TmpHeigh = $("#progressIndicatorBackground").css('height');
        $("#progressIndicatorBackground").css('height', parseFloat(TmpHeigh)-1);
    }
}
I have no clue what to do next and how to fix the problem. I don't care if it is a dirty fix.
解决方案
I think toggleClass() might do the trick, take a look at this fiddle here. Just set a class that hides it with something other then display:none and toggle it when you want the load bar to show or when you want to hide it. In my example I just setTimeout instead of animating a loading animation, but hopefully the hide/show method will work regardless.

                        
这篇关于jQuery切换，隐藏，显示 -  Chrome覆盖错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！