Geek Answers Handbook

Unwanted "flickering" effect when using hide and show in jquery

I get an annoying "flickering" effect in Firefox when using jQuery "show" and "hide" for some divs. Any idea when this could happen?

+4
source share
8 answers

Depending on what you mean by flicker (if it only flickers when the page loads), instead of doing:

$(document).ready(function(){ $("hide").hide(); }); <div id="hide">My Hidden Text</div>

Try adding a mapping: none to CSS:

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

CSS is applied to the DOM before even JavaScript can control it, so if you do this, the page should not flicker.

It should also be noted that in Firefox there is an error that causes the window to flicker when the window is resized (vertically), and the current scroll position is close to or at the bottom of the window.

+5
source

The flicker comes from this line of jQuery code in the show () method:

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

He does this to determine the CSS that he should use for the display attribute, since different tags get different values ​​(div: block, span: inline, tr: table-row, etc.). Manipulating the DOM in this way causes flickering.

Using:

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

which will usually do the same.

+6
source

Two possible reasons:

  • Hiding and showing causes the scroll bar to appear and disappear, which changes the width of the page; or
  • The displayed and disappearing div changes the width and / or height calculations.

In addition, we will need a sample.

+4
source

@Stephen: Displaying hard coding: none of CSS seems like a simple fix, but it might be a bad idea. If the hidden content is important for the user and simply hides during loading for convenience (and then is displayed when the user, for example, clicks a button), then it displays: none of them will hide the content from those who have javascript disabled. worries then don't use this approach ...

+2
source

It is this line that causes flickering. I wrote this extension to remove a line from the show function. Note that it always sets the display element to "block".

In the end, I decided it differently. I used the span element and changed it to a 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);
+1
source

I noticed that too. I don’t have a specific answer for you, but you can try redoing the / padding / margin border for the item in question.

0
source

Per John Resig in response to a similar complaint in the jQuery Google Group here

Which browser? If you are in IE, then this is a flicker, because your page is in Quirks mode instead of standards (you will need to specify the correct DOCTYPE to trigger this).

Also this post seems to point to the same solution.

0
source

Since you mentioned some divs, if you are animating more than one div at a time, this may cause flickering due to multiple reviews.

1st solution, use setimeout to break down each animation

Second solution, move the whole animation to css and just switch the class and then hide it.

And use both together to show and hide (using the transition for opacity)

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

Monitor repaints using devtools in your browser. The more repainting, the more flicker and lag.

0
source

More articles:


All Articles