jquery 中的上滑和下滑有问题

Question

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

到目前为止我可以让它工作。具有 mouseEvents 的元素位于视口的中心并彼此相邻浮动。当我从 1 个元素过渡到它旁边的另一个元素（触发事件）太快时，这些顶部和底部 divs 中断并消失，直到我再次触发 mouseEvents。

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

出于某种原因，有 2 行 HTML 代码未显示。这些位于 div 和 class="block" 的正下方（检查 fiddle）

<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 div，过渡由 CSS 处理。

jquery 中的上滑和下滑有问题

Having trouble with slideup & slidedown in jquery

jquery

mouseover

slidedown

slideup

mouseout