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

取决于您所说的闪烁(如果它只在页面加载时闪烁),而不是执行以下操作:

$(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中,因此如果这样做,那么在加载页面时就不应该出现闪烁。

另外值得注意的是,在火狐中,有一个bug,当你改变窗口的大小(垂直方向)时,会导致窗口闪烁,并且当前的滚动位置是关闭的或者在窗口的底部。

闪烁来自jquery代码的这一行,在show()方法中:

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

这样做是为了检测它应该用于显示属性的CSS,因为不同的标记得到不同的值(div:block、span:inline、tr:table row等)。以这种方式操作DOM会导致闪烁。

用途:

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

通常也会做同样的事情。

两个可能的原因:

1. 隐藏和显示导致滚动条出现和消失,从而改变页面宽度;或
2. 出现和消失的DIV会更改宽度和/或高度计算。

除此之外,我们还需要一个样品。

@斯蒂芬:硬编码显示:CSS中没有一个看起来很容易修复,但这可能是一个坏主意。如果隐藏内容对用户很重要,并且只是为了方便而在加载时隐藏(然后在用户单击按钮时显示),则显示:无将永久隐藏内容,不让禁用javascript的用户看到。如果可访问性是您的一个问题,那么不要使用这种方法…

正是这条线引起了闪烁。我编写了这个扩展来删除show函数中的行。请注意,它总是将显示元素设置为“block”。

我最终以不同的方式解决了它。我使用了一个跨度元素并将其改为一个分区。

/** 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);

由于您提到了一些划分,如果您同时动画多个划分,可能会由于多个重新绘制而导致闪烁。

第一个解决方案,使用setTimeout分割每个动画

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

同时使用这两个选项,如下所示显示和隐藏(使用不透明度转换)

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监视重新绘制。重新喷漆越多,闪烁和滞后就越多。

我也注意到了。我没有一个明确的答案给你,但是你可以试着修补相关元素的边界/填充/空白。

根据John Resig对jquery谷歌集团类似投诉的回应 here

哪个浏览器?如果你在IE,那么 这种闪烁是因为您的页面 在怪癖模式而不是标准模式下 模式(您需要提供正确的 doctype以便触发此操作)。

也这个 post 似乎指向相同的解决方案。