Div Flashing vor jQuery zeigen oder verbergen

Question

Auf dieser Seite: http://woocommerce-74099-288162.cloudwaysapps.com/flashing-jquery Ich habe eine Registerkarte unten auf der Seite. Wenn Sie auf die Tab-Buttons auf der linken Seite klicken, blinkt das Div, das angezeigt werden soll, unten auf der Seite, bevor es in die Animation des Zeigens oder Verbergens geht. Mein Code ist grundlegend:

jQuery(document).ready(function() { 
    jQuery("#ct_div_block_121_post_13").hide(600); 
}); 
jQuery("#ct_text_block_86_post_13").click(function(){ 
    jQuery("#ct_div_block_121_post_13").show(600); 
    jQuery("#ct_div_block_90_post_13").hide(600); 
}); 
jQuery("#ct_text_block_84_post_13").click(function(){ 
    jQuery("#ct_div_block_90_post_13").show(600); 
    jQuery("#ct_div_block_121_post_13").hide(600); 
}); 

Ich habe Anzeige keine mit css auf dem versteckten div ebenso versucht.

Vielen Dank für jede Hilfe.

Answer 1

Das "Blinken" ist auf beide Animationen zurückzuführen, die gleichzeitig auftreten.

Wenn Sie die zweite in den Rückruf der ersten setzen, werden sie in der Reihenfolge auftreten.

Try this:

jQuery(document).ready(function() { 
    jQuery("#ct_div_block_121_post_13").hide(600); 
}); 
jQuery("#ct_text_block_86_post_13").click(function(){ 
    jQuery("#ct_div_block_90_post_13").hide(600,function(){ 
    jQuery("#ct_div_block_121_post_13").show(600); 
    }); 
}); 
jQuery("#ct_text_block_84_post_13").click(function(){ 
    jQuery("#ct_div_block_121_post_13").hide(600,function(){ 
    jQuery("#ct_div_block_90_post_13").show(600); 
    }); 
}); 

---

EDIT

Da die "auffällige Fehler" noch vorhanden ist, lassen Sie uns etwas anderes versuchen.

In style.css, Kommentar, diesen Teils aus (/* und */ wie unten verwenden):

/* 
.ct-section::after, 
.ct-section-inner-wrap::after, 
.ct-div-block::after { 
    display: table; 
    content: " "; 
    clear: both; 
    white-space: normal; 
} 
*/ 

Und fügt:

.ct-section, 
.ct-section-inner-wrap, 
.ct-div-block{ 
    display:table; 
    clear:both; 
} 

Wenn die div versteckt ist, das Pseudoelement :after verschwindet.
The "flash" can be seen here bei 10% Geschwindigkeit ... Machen Sie es offensichtlich.

Answer 2

Einer der jquery Vorteil ist Chaining, denke, ich werde es Ihnen in diesem

jQuery(document).ready(function() { 
    jQuery("#ct_div_block_121_post_13").hide(600); 
}); 
jQuery("#ct_text_block_86_post_13").click(function(){ 
    jQuery("#ct_div_block_121_post_13").show(600).jQuery("#ct_div_block_90_post_13").hide(600); 
}); 
jQuery("#ct_text_block_84_post_13").click(function(){ 
    jQuery("#ct_div_block_90_post_13").show(600).jQuery("#ct_div_block_121_post_13").hide(600); 
});