在 jquery 中上滑和下滑时遇到问题

Question

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

问题是大约 2 个 div 位于页面的顶部和底部（绝对）。鼠标悬停时，这两个应该向下滑动，鼠标悬停时，它们应该向上滑动。

到目前为止，我可以让它工作。带有 mouseEvents 的元素位于视口的中心并彼此相邻浮动。 当我从一个元素过渡到它旁边的另一个元素（触发事件）太快时，这些顶部和底部 div 会中断并消失，直到我再次触发 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 代码。这些位于带有 class="block" 的 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>

首先，可以用hover代替mouseenter 7 mouseleave。

对于不透明度，你不需要 JS，你可以使用 CSS 来处理它，对于你的 .upp 和 .low div，过渡是由 CSS 处理的。