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

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

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

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

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

同样值得注意的是,在Firefox中,当您更改窗口大小(垂直)并且当前滚动位置接近或位于窗口底部时,会出现一个错误,导致窗口闪烁。

闪烁来自show()方法中的这行jQuery代码:

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

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

用途:

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

这通常会做同样的事情。

两个可能的原因:

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

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

确实是这条线导致了闪烁。我编写此扩展是为了从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);

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

并按如下方式将两者结合使用以显示和隐藏(使用过渡来显示不透明度)

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

JavaScript

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

我也注意到了这一点。我没有给你一个明确的答案,但你可以试着对所讨论的元素进行border/paddy/margin的修改。

Per John Resig回应Jquery谷歌集团的类似投诉 here

在Quirks模式下而不是标准模式下 模式(您需要提供正确的

post 似乎指向了相同的解决方案。