Возникли проблемы со слайдом и слайдером в jquery

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

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

Пока я могу заставить это работать. Элементы с mouseEvents располагаются в центре области просмотра и плавают рядом друг с другом. Когда я слишком быстро перехожу от 1 элемента к другому рядом с ним (запуская события), эти верхние и нижние элементы 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-кода. Они расположены чуть ниже div с class="block" (проверьте скрипку)

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

jquery mouseover mouseout slidedown slideup
person Endelerius    schedule 07.10.2015    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Это сделает это гладко и красиво:

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

person Ramtin Gh    schedule 07.10.2015
comment
@Endelerius Пожалуйста, примите ответ;) - person Ramtin Gh; 07.10.2015
comment
О, извините, я полагаю, это буква "V", которую я должен проверить? Если да: сделано. - person Endelerius; 07.10.2015
comment
Я также понял, что это позволяет мне удалить pointer-events: none; из .linkC - person Endelerius; 07.10.2015