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

本页面底部有一个选项卡框：http://woocommerce-74099-288162.cloudwaysapps.com/flashing-jquery。当您点击左侧的标签按钮时，应该显示的div会在页面底部闪烁，然后进入显示或隐藏动画。我的代码是基本的：Div在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); 
});

我试过在CSS上也没有显示CSS。

谢谢你的帮助。

来源

2017-07-09 BenJonroc

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

如果在第一个回调中放置第二个，它们将按顺序发生。

试试这个：

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

编辑

由于 “浮华虫” 依然存在，让我们尝试别的东西。

在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％的速度...显而易见。

来源

2017-07-09 21:14:35

感谢发送此...它仍然闪烁认为？ – BenJonroc

heheh ...好吧，我认为应该先做隐藏。我编辑过。 –

工作流畅，但点击时仍有明亮的闪光。我正在使用Chrome。 – BenJonroc

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

来源

2017-07-09 21:23:39 Osama

这会隐藏div，但第二个div没有显示/触发。 – BenJonroc

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

回答

相关问题