Возникают проблемы с slideup & slidedown в JQuery

Question

https://jsfiddle.net/ydbx2a9c/5/

Речь идет о 2 дивы, расположенные в верхней & нижней части страницы (абсолютное). При наведении курсора мыши эти 2 должны сдвинуться влево и на выводе мыши, они должны сдвинуться по экрану.

До сих пор я могу заставить это работать. Элементы с mouseEvents расположены в центре окна просмотра и плавают рядом друг с другом. Когда я перехожу из одного элемента в другой рядом с ним (запуская события) слишком быстро, эти верхние & нижние разделители ломаются и исчезают, пока я снова не вызову mouseEvents.

Это намного яснее, когда вы пробуете себя в скрипке.

HTML

<div class="block" style="height: 100vh;"> 
<div class="centered"> 
    <div class="floatL buttoncase"> 
     <span class="linkC">number one</span> 
    </div> 
    <div class="floatL buttoncase"> 
     <span class="linkC">number two</span> 
    </div> 
    <div class="floatL buttoncase"> 
     <span class="linkC">number three</span> 
    </div> 
</div> 

CSS

.border_div { 
background: rgb(26, 30, 33); 
position: absolute; 
height: 15vh; 
width: 100%;} 
.upp {top: 0; right: 0; display:none} 
.low {bottom: 0; left: 0; display:none} 

JQuery

$(function(){ 
var $eAll = $(".buttoncase"); 
var $eBorU = $(".upp"); 
var $eBorL = $(".low"); 
$(".buttoncase").mouseover(function(){ 
    $eAll.clearQueue(); 
    $eAll.not(this).fadeTo("fast", 0.3); 
    $(this).find(".linkC").fadeTo("fast", 1); 

    $eBorU.clearQueue(); $eBorL.clearQueue(); 
    $eBorU.slideDown("fast"); 
    $eBorL.slideDown("fast"); 
}); 
$(".buttoncase").mouseout(function(){ 
    $eAll.clearQueue(); 
    $eAll.fadeTo("fast", 1); 
    $(this).find(".linkC").fadeTo("fast", 0); 

    $eBorU.clearQueue(); $eBorL.clearQueue(); 
    $eBorU.slideUp("fast"); 
    $eBorL.slideUp("fast"); 
});}); 

по какой-то причине 2 строки кода HTML не отображаются. Они расположены чуть ниже DIV с классом = "блок" (проверьте скрипку)

<div class="border_div upp"></div> 
<div class="border_div low"></div> 

Answer 1

Это сделает его гладким и красивым образом:

$(".buttoncase").hover(
 
    function(){ 
 
     $('.block').addClass('hovered'); 
 
     $('.border_div').addClass('shown'); 
 
    }, 
 
    function(){ 
 
     $('.block').removeClass('hovered'); 
 
     $('.border_div').removeClass('shown'); 
 
    } 
 
)

.border_div { 
 
    background: rgb(26, 30, 33); 
 
    position: absolute; 
 
    height: 0vh; 
 
    width: 100%; 
 
    transition:all 0.3s ease 0.1s; 
 
} 
 
.border_div.shown{ 
 
    height: 15vh; 
 
} 
 
.upp {top: 0; right: 0;} 
 
.low {bottom: 0; left: 0;} 
 
/* The following classes are just to set up the center divs 
 
* Not important regarding my problem (at least I think so) 
 
*/ 
 
.floatL { float: left; } 
 
.buttoncase:last-child { margin: 0;} 
 
.buttoncase { 
 
    width: 150px; 
 
    height: 242px; 
 
    border: 1px solid rgb(24, 33, 45); 
 
    background-color: rgb(180, 180, 180); 
 
    margin-right: 5px; 
 
    transition:all 0.3s ease 0.1s; 
 
} 
 
.linkC { 
 
    pointer-events: none; 
 
    opacity: 0.0; 
 
    filter: alpha(opacity=0); 
 
    transition:all 0.3s ease; 
 
} 
 
.block { 
 
    text-align: center; 
 
} 
 
.block:before { 
 
    content: ''; 
 
    display: inline-block; 
 
    height: 100%; 
 
    vertical-align: middle; 
 
    margin-right: -0.25em; /* Adjusts for spacing */ 
 
} 
 
.centered { 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
    /*width: 550px;*/ 
 
    /*padding: 25px; 
 
    border: #a0a0a0 solid 1px;*/ 
 
    background: rgba(0,0,0,0); 
 
} 
 
.block.hovered .buttoncase{ 
 
    opacity:0.3; 
 
} 
 
.buttoncase:hover{ 
 
    opacity:1!important; 
 
} 
 
.buttoncase:hover > .linkC{ 
 
    opacity:1!important; 
 
} 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="block" style="height: 100vh;"> 
 
    <div class="centered"> 
 
     <div class="floatL buttoncase"> 
 
      <span class="linkC">number one</span> 
 
     </div> 
 
     <div class="floatL buttoncase"> 
 
      <span class="linkC">number two</span> 
 
     </div> 
 
     <div class="floatL buttoncase"> 
 
      <span class="linkC">number three</span> 
 
     </div> 
 
    </div> 
 
</div> 
 

 
<div class="border_div upp"></div> 
 
<div class="border_div low"></div>

Первый , вместо mouseenter 7 mouseleave, вы можете использовать зависание.

И для непрозрачности вам не нужен JS, вы можете обрабатывать его с помощью CSS, также для вашего .upp & .low divs, переход обрабатывается CSS.