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顯示或隱藏之前閃爍

回答

相關問題