JavaScript mouseenter и эффекты mouseleave исчезают с ошибками - PullRequest
Новая
       46

JavaScript mouseenter и эффекты mouseleave исчезают с ошибками

1 голос
/ 27 марта 2019

Я сделал пример в скрипте JS, если вы, например, наведите курсор мыши на «Стену», а затем наведите курсор на выпадающее меню, которое исчезает ниже. Прежде чем вы сможете использовать его, он исчезнет, ​​затем исчезнет.

Я попытался использовать тайм-аут и проверить, является ли он тем же родителем при наведении. Это не сработало, потому что, когда вы полностью оторветесь от него, оно останется.

https://jsfiddle.net/eqxDev/t49e7amz/

$(document).ready(function () {

$('.places .place-link, .place_dropdown').one().on('mouseenter', function () {
    $("#place_link_" + $(this).data('placement')).addClass('hovered');
    $("#place_dropdown_" + $(this).data('placement')).addClass('hovered');
    $("#place_dropdown_" + $(this).data('placement')).fadeIn(350);
});

$('.places .place-link, .place_dropdown').one().on('mouseleave', function () {
    $("#place_link_" + $(this).data('placement')).removeClass('hovered');
    $("#place_dropdown_" + $(this).data('placement')).removeClass('hovered');
    $("#place_dropdown_" + $(this).data('placement')).fadeOut(350);
});

});

При наведении курсора на элемент «Стена» он не должен исчезать, а затем исчезать при попытке навести курсор на список элементов ниже.

Заранее спасибо.

1 Ответ

0 голосов
/ 27 марта 2019

Проблема в том, что mouseleave / mouseenter срабатывает при переходе от вкладки к меню внизу. Чтобы это исправить, добавьте вызов stop() перед исчезновением, чтобы переместить очередь анимации в конец перед добавлением новой анимации: 

$(document).ready(function() {
  $('.places .place-link, .place_dropdown').on('mouseenter', function() {
    var placement = $(this).data('placement');
    $("#place_link_" + placement).addClass('hovered');
    $("#place_dropdown_" + placement).addClass('hovered').stop(true).fadeIn(350);
  });

  $('.places .place-link, .place_dropdown').on('mouseleave', function() {
    var placement = $(this).data('placement');
    $("#place_link_" + placement).removeClass('hovered');
    $("#place_dropdown_" + placement).removeClass('hovered').stop(true).fadeOut(350);
  });
});
body {
  background: #fff;
  padding: 20px;
  font-family: Helvetica;
}

.places li {
  display: inline-block;
  margin-right: 100px
}

.place_dropdown {
  border: 1px solid black;
  margin-top: -15px
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="places">
  <li class="place-link" id="place_link_wall" data-placement="wall">
    <span class="icon-title">Wall</span>
  </li>
  <li class="place-link" id="place_link_floor" data-placement="floor">
    <span class="icon-title">Floor</span>
  </li>
</ul>

<div class="place_dropdown" id="place_dropdown_wall" style="display: none" data-placement="wall">
  <span>Wall</span>
  <ul>
    <li><a href="#">Test Page</a></li>
    <li><a href="#">Test Page</a></li>
    <li><a href="#">Test Page</a></li>
    <li><a href="#">Test Page</a></li>
    <li><a href="#">Test Page</a></li>
    <li><a href="#">Test Page</a></li>
    <li><a href="#">Test Page</a></li>
    <li><a href="#">Test Page</a></li>
  </ul>
</div>
<div class="place_dropdown" id="place_dropdown_floor" style="display: none" data-placement="floor">
  <span>Floor</span>
  <ul>
    <li><a href="#">Test Page</a></li>
    <li><a href="#">Test Page</a></li>
    <li><a href="#">Test Page</a></li>
    <li><a href="#">Test Page</a></li>
    <li><a href="#">Test Page</a></li>
    <li><a href="#">Test Page</a></li>
    <li><a href="#">Test Page</a></li>
    <li><a href="#">Test Page</a></li>
  </ul>
</div>

Учитывая все вышесказанное, ничего не стоит, что с незначительными структурными изменениями в HTML вы можете сделать это меню полностью в CSS.

...