Having trouble with slideup & slidedown in jquery

Question

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

The issue is about 2 divs positioned at the top & bottom of the page (absolute). On mouseover, these 2 should slideDown and on mouseout, they should slideUp.

So far I can get this to work. The elements with the mouseEvents are positioned in the center of the viewport and floating next to each other. When I transition from 1 element to another next to it (triggering the events) too fast, these top & bottom divs break and dissappear until I trigger the mouseEvents again.

It's a lot clearer when you try it out yourself in the fiddle.

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

for some reason, 2 lines of HTML code aren't being show. These are located just below the div with class="block" (check the fiddle)

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

Answer 1

This will do it in a smooth and nice way:

$(".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>

First, instead of mouseenter 7 mouseleave, You can use hover.

And for the opacity, you don't need JS, you can handle it using CSS, also for your .upp & .low divs, the transition is handled by CSS.