引導崩潰的作品藏起來，但不顯示

Question

總之，這種情況正在發生：https://jsfiddle.net/exr4hv8z/2/（嘗試將鼠標懸停按鈕，然後移動鼠標了幾次）

無論出於何種原因，要素崩潰，找個地方藏起來就好了，但另一個元素，應該崩潰在視圖不會動畫，只要一旦其他元素完成彈出。

HTML：

<div id="nav_bar"> 

<a href="index.php"> 
    <div class="navbutton_background background_normal collapse in"></div> 
    <div class="navbutton_background background_hover collapse" style="height: 0;"></div> 
    <div class="navbutton_background background_click collapse" style="height: 0;"></div> 
    <button class="navbutton rightborder">Home</button> 
</a> 

<a href="forum.php"> 
    <div class="navbutton_background background_normal collapse in left_1"></div> 
    <div class="navbutton_background background_hover collapse left_1" style="height: 0;"></div> 
    <div class="navbutton_background background_click collapse left_1" style="height: 0;"></div> 
    <button class="navbutton leftborder rightborder left_1">Forums</button> 
</a> 

<a href="servers.php"> 
    <div class="navbutton_background background_normal collapse in left_2"></div> 
    <div class="navbutton_background background_hover collapse left_2" style="height: 0;"></div> 
    <div class="navbutton_background background_click collapse left_2" style="height: 0;"></div> 
    <button class="navbutton leftborder rightborder left_2">Servers</button> 
</a> 

<a href="contact.php"> 
    <div class="navbutton_background background_normal collapse in left_3"></div> 
    <div class="navbutton_background background_hover collapse left_3" style="height: 0;"></div> 
    <div class="navbutton_background background_click collapse left_3" style="height: 0;"></div> 
    <button class="navbutton leftborder rightborder left_3">Contact</button> 
</a> 

<a href="about.php"> 
    <div class="navbutton_background background_normal collapse in left_4"></div> 
    <div class="navbutton_background background_hover collapse left_4" style="height: 0;"></div> 
    <div class="navbutton_background background_click collapse left_4" style="height: 0;"></div> 
    <button class="navbutton leftborder left_4">About</button> 
</a> 

</div> 

CSS：

#nav_bar 
{ 
background-color: rgba(27, 27, 27, 1); 

width: 100%; 
height: 5rem; 

border-width: 10%; 

margin-top: 2rem; 

position: relative; 
} 

.navbutton 
{ 
background-color: rgba(0, 0, 0, 0); 
color: rgba(10, 10, 10, 1); 

font-weight: bold; 

width: 20%; 
height: 100%; 

position: absolute; 

z-index: 1; 

border: 0; 
border-bottom: 0.5rem solid rgba(0, 0, 0, 0.2); 
} 

.navbutton_background 
{ 
width: 20%; 
height: 100%; 

position: absolute; 
} 

/* Colors for button states */ 
.background_normal { background-color: rgba(40, 40, 40, 1); } 
.background_hover { background-color: rgba(0, 190, 220, 1); } 
.background_click { background-color: rgba(0, 210, 240, 1); } 

/* Left_# are for positioning each individual button 20*#% away from the left side */ 
.left_1 { left: 20%; } 
.left_2 { left: 40%; } 
.left_3 { left: 60%; } 
.left_4 { left: 80%; } 

.leftborder { border-left: 0.3rem dashed rgba(27, 27, 27, 1); } 
.rightborder { border-right: 0.3rem dashed rgba(27, 27, 27, 1); } 

JS：

$(document).ready (function() { 
    $("#nav_bar a").mouseover (function() { 
     $(this).find (".background_normal").collapse ('hide'); 
     $(this).find (".background_hover").collapse ('show'); 
    }); 
    $("#nav_bar a").mouseout (function() { 
     $(this).find (".background_hover").collapse ('hide'); 
     $(this).find (".background_normal").collapse ('show'); 
    }); 
}); 

編輯：我找到了一個解決方法問題，但我不真的認爲它是一個答案，因爲它不以任何方式阻止或修復此問題。我最終在其他元素下面添加了另一個元素，它在mouseover/mouseout上改變顏色來模仿沒有正確摺疊的元素。更新小提琴：https://jsfiddle.net/exr4hv8z/3/

Answer 1

使用這個代替：

$(document).ready (function() { 
    $("#nav_bar a").hover (function() { 
     $(this).find (".background_normal").collapse ('hide'); 
     $(this).find (".background_hover").collapse ('show'); 
    }, 
    function() { 
     $(this).find (".background_hover").collapse ('hide'); 
     $(this).find (".background_normal").collapse ('show'); 
    }); 
});