jQuery 显示或隐藏之前的 Div 闪烁

Question

在这个页面上：http://woocommerce-74099-288162.cloudwaysapps.com/flashing-jquery 我在页面底部有一个标签框。当您单击左侧的选项卡按钮时，应该显示的 div 在进入显示或隐藏动画之前会在页面底部闪烁。我的代码是基本的：

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

我也尝试在隐藏的 div 上使用 css 显示 none。

感谢您的帮助。

Answer 1

jquery 的优势之一是链接，我认为它会在这方面对你有所帮助

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

Answer 2

“闪烁”是由于两个动画同时发生。

如果你把第二个放在第一个的回调中，它们会按顺序发生。

试试这个：

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

---

编辑

既然“闪现的bug”依然存在，那就试试别的吧。

在style.css 中，将此部分注释掉（使用/* 和*/，如下所示）：

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

并添加：

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

当div 被隐藏时，伪元素:after 消失。
The "flash" can be seen here 以 10% 的速度...变得明显。