Question

当在某些div上使用jQuery“show”和“hide”时，我在Firefox中遇到了令人讨厌的“闪烁”效果。有什么想法可以发生吗？

Answer 1

取决于闪烁的含义（如果页面加载时只会闪烁），而不是：

$(document).ready(function(){
   $("hide").hide();
});

<div id="hide">My Hidden Text</div>

尝试在CSS中添加display：none：

<div id="hide" style="display:none">My Hidden Text</a>

在允许JavaScript操作之前，CSS应用于DOM，所以如果你这样做，加载页面时应该没有闪烁。

另外值得注意的是，在Firefox中，当您更改窗口大小（垂直）并且当前滚动位置接近或位于窗口底部时，会出现导致窗口闪烁的错误。

Answer 2

闪烁来自jQuery代码的这一行，在show（）方法中：

 var elem = jQuery("<" + tagName + " />").appendTo("body");

它可以检测它应该用于display属性的CSS，因为不同的标签会得到不同的值（div：block，span：inline，tr：table-row等）。以这种方式操作DOM会导致闪烁。

使用：

jQuery('...').css('display','block');

通常会做同样的事情。

Answer 3

两个可能的原因：

隐藏和显示导致滚动条出现和消失，这会改变页面宽度;或
出现和消失的div会改变宽度和/或高度计算。

除此之外，我们需要一个样本。

Answer 4

@Stephen：硬编码显示：CSS中没有一个看起来像是一个简单的修复，但它可能是一个坏主意。如果隐藏内容对用户很重要，只是为了方便而隐藏在加载中（然后在用户点击按钮时显示），则显示：none将永久隐藏禁用javascript的内容。如果您可以关注辅助功能，那么请不要使用此方法...

Answer 5

确实是这条线会导致闪烁。我写了这个扩展来从show函数中删除该行。请注意，它始终将显示元素设置为“阻止”。

我最终以不同的方式解决了它。我使用了span元素并将其更改为div。

/** fixes flicker in jQuery show function */
var fxAttrs = [
  // height animations
  [ "height", "marginTop", "marginBottom", "paddingTop", "paddingBottom" ],
  // width animations
  [ "width", "marginLeft", "marginRight", "paddingLeft", "paddingRight" ],
  // opacity animations
  [ "opacity" ]
 ];

function genFx( type, num ){
 var obj = {};
 jQuery.each( fxAttrs.concat.apply([], fxAttrs.slice(0,num)), function(){
  obj[ this ] = type;
 });
 return obj;
}

(function($){ 
    $.fn.extend({ 
 show: function(speed,callback){
  if ( speed ) {
   return this.animate(genFx("show", 3), speed, callback);
  } else {
   for ( var i = 0, l = this.length; i < l; i++ ){
    var old = jQuery.data(this[i], "olddisplay");

    this[i].style.display = old || "";

    if ( jQuery.css(this[i], "display") === "none" ) {
     jQuery.data(this[i], "olddisplay", 'block');
    }
   }

   // Set the display of the elements in a second loop
   // to avoid the constant reflow
   for ( var i = 0, l = this.length; i < l; i++ ){
    this[i].style.display = jQuery.data(this[i], "olddisplay") || "";
   }

   return this;
  }
 }
    }); 
})(jQuery);

Answer 6

由于你提到了一些div，如果你同时动画多个div可能会因多次重绘而导致闪烁。

第一个解决方案，使用settimeout分割每个动画

第二个解决方案，将所有动画移动到css，只需切换类然后隐藏它。

并且如下所示同时使用show和hide（使用不透明度的转换）

CSS

#you_div {
    transition: opacity 0.4s ease-in-out;
}

JS

//To show
$('#you_div').css('opacity', '0');
$('#you_div').css('display', 'block');
setTimeout(function() {
    $('#you_div').css('opacity', '1');
}, 50);

//To hide
$('#you_div').css('opacity', '0');
setTimeout(function() {
    $('#you_div').css('display', 'none');
},400);

使用浏览器上的devtools监控重绘。重画更多，更闪烁和滞后。

Answer 7

我也注意到了这一点。我没有给你一个明确的答案，但你可能会尝试修补相关元素的边框/填充/边距。

Answer 8

Per John Resig对Jquery Google Group here的类似投诉作出回应

哪个浏览器？如果你在IE中，那么这个闪烁是因为你的页面是在Quirks模式而不是标准模式（你需要提供正确的 DOCTYPE为了触发这个）。

此post似乎也指向同一解决方案。

在jquery中使用hide和show时不需要的“闪烁”效果

8 个答案: