Warum blinken meine Divs vor dem Ausblenden auf dem Bildschirm?

Question

Ich habe einen Tabber, und die 3/4 Tabs, die versteckt werden sollten, blinken auf dem Bildschirm, bevor sie tatsächlich display:none;. Ich habe versucht, eine zusätzliche .addClass in meine jQuery, versuchte Inline-Styling display:none; auf den Divs und haben die display:none in meiner CSS-Datei und kann immer noch nicht das lösen? Was könnte das verursachen?

jQuery(function($) { 
 
    $('.professor__tabs').each(function() { 
 

 
    $('.tabs__body', this).addClass('tabs__body--is-hidden'); 
 
    $('.tabs__head', this).on('click', function(index) { 
 

 
     var test = $(this).index(); 
 

 
     $('.tabs__body').addClass('tabs__body--is-hidden'); 
 
     $('.tabs__head') 
 
      .removeClass('tabs__head--is-active') 
 
      .filter($(this)) 
 
      .addClass('tabs__head--is-active') 
 
      .next('.tabs__body') 
 
      .removeClass('tabs__body--is-hidden'); 
 

 
     }) 
 
     .filter(':first') 
 
     .click(); 
 
    }); 
 
});

.tabs__body { 
 
    -webkit-box-flex: 0; 
 
    -webkit-flex: 0 0 100%; 
 
    -ms-flex: 0 0 100%; 
 
    flex: 0 0 100%; 
 
    -webkit-box-ordinal-group: 3; 
 
    -webkit-order: 2; 
 
    -ms-flex-order: 2; 
 
    order: 2; 
 
    background-color: white; 
 
    padding: 20px; 
 
    min-height: 260px; 
 
    max-height: 410px; 
 
    overflow: auto; 
 
    border-bottom-left-radius: 6px; 
 
    border-bottom-right-radius: 6px; 
 
    display: block; 
 
} 
 
.tabs__body--is-hidden { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 

 
<div class="professor__tabs"> 
 
    <div class="tabs__head">Intro</div> 
 
    <div class="tabs__body"> 
 
    1 
 
    </div> 
 

 
    <div class="tabs__head">Events</div> 
 
    <div class="tabs__body"> 
 
    2 
 
    </div> 
 

 
    <div class="tabs__head">Stream</div> 
 
    <div class="tabs__body"> 
 
    3 
 
    </div> 
 

 
    <div class="tabs__head last-head">Posts</div> 
 
    <div class="tabs__body"> 
 
    4 
 
    </div>

Ich bemerkte, dass ich das nicht auf JSFiddle replizieren kann, aber ich werde meinen Link gehören sowieso: Here

Answer 1

Wenn Sie Elemente mit einem Skript zu verbergen, da wird ein Zeitraum sein, wenn das Element sichtbar ist. Ich empfehle, das Skript so anzuordnen, dass es unmittelbar nach dem Element auf der Webseite ausgeblendet wird oder einen Ladebildschirm verwendet, der Inhalt ausblendet und erst verschwindet, wenn die Seite vollständig geladen ist.

Diese Methode ist nützlich, wenn Sie Browser unterstützen möchten, die CSS unterstützen, aber js nicht unterstützen. Solche Browser würden niemals Inhalt sehen, der standardmäßig mit CSS ausgeblendet ist.

<div id='myDiv'></div> 
<script> 
    $('#myDiv').addClass('style--hidden'); 
</script> 

Ansonsten die Standardklasse auf die versteckte Klasse gesetzt und dann jQuery

$(element).removeClass('class-name--hidden'); 

Answer 2

Aufgrund der Art und Weise Sie das Versteck Feature implementiert verwenden Verwendung der Browser die divs nicht verstecken, bis das Dokument fertig ist - Stattdessen sollten Sie standardmäßig .tabs__body--is-hidden auf den Divs haben, die bereits HTML verwenden, und dann das sichtbare div über JS verarbeiten.