нежелательный «мерцающий» эффект при использовании скрытия и показа в jquery

Question

Я получаю раздражающий «мерцающий» эффект в Firefox при использовании jQuery «show» и «hide» на некоторых div. Есть идеи, когда это могло произойти?

Answer 1

Мерцание происходит из этой строки кода jQuery в методе show ():

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

Это делает это для определения CSS, который он должен использовать для атрибута display, поскольку разные теги получают разные значения (div: block, span: inline, tr: table-row и т. Д.). Такое управление DOM вызывает мерцание.

Использование:

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

, что обычно делает то же самое.

Answer 2

В зависимости от того, что вы подразумеваете под мерцанием (если оно мерцает только при загрузке страницы), вместо выполнения:

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

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

Попробуйте добавить отображение: нет в CSS:

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

CSS применяется к DOM, прежде чем даже JavaScript разрешено манипулировать им, поэтому, если вы это сделаете, при загрузке страницы не должно быть мерцания.

Также следует отметить, что в Firefox есть ошибка, из-за которой окно мерцает при изменении размера окна (по вертикали), а текущая позиция прокрутки находится близко или в нижней части окна.

Answer 3

Две возможные причины:

1. При скрытии и отображении полоса прокрутки появляется и исчезает, что изменяет ширину страницы; или
2. Отображение и исчезновение div изменяет вычисления ширины и / или высоты.

Кроме этого нам понадобится образец.

Answer 4

@ Стивен: Жесткое отображение: ни один в CSS не может показаться простым решением, но это потенциально плохая идея. Если скрытый контент важен для пользователя и просто скрывается при загрузке для удобства (а затем отображается, когда пользователь, например, нажимает кнопку), то отображается: ни один из них не будет постоянно скрывать контент от тех, у кого отключен JavaScript , Если для вас важна доступность, не используйте этот подход ...

Answer 5

Поскольку вы упомянули несколько div, если вы анимируете более одного div одновременно, это может вызвать мерцание из-за многократных перерисовок.

1-е решение, используйте settimeout для разделения каждой анимации

2-е решение, переместите всю анимацию в 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 в вашем браузере. Чем больше перекрас, тем больше мерцаний и лагов.

Answer 6

Именно эта линия вызывает мерцание. Я написал это расширение, чтобы удалить строку из функции шоу. Обратите внимание, что он всегда устанавливает для элемента отображения значение «блок».

Я в конце концов решил это по-другому. Я использовал элемент 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 7

За Джона Ресига в ответ на аналогичную жалобу в Jquery Google Group здесь

Какой браузер? Если вы в IE, то это мерцание, потому что ваша страница в режиме Причуды вместо Стандартов режим (вам нужно будет предоставить правильный DOCTYPE, чтобы вызвать это).

Также этот пост , кажется, указывает на то же решение.

Answer 8

Я тоже это заметил. У меня нет определенного ответа для вас, но вы можете попробовать поэкспериментировать с границей / отступом / полем для рассматриваемого элемента.