Jquery fadeIn и fadeOut не работают, как правильно создать fadein-анимацию с помощью addclass и mouseover?

Question

Основная идея заключается в том, что у меня есть меню магазина в виде списка

<li class="shop-menu"><a href="{{url('shop')}}">shop</a></li>

, когда меню магазина зависло (наведение курсора jquery функция), я хочу исчезнуть В div я называю его

shop-menu-div

Я успешно открыл это меню без анимации плавного появления, имея css display: none, а затем display: contents при наведении на addClass ('active)

дело в том, что я хотите, чтобы этот div shop-menu-div исчезал при наведении курсора и исчезал при отпускании мыши

пробовал несколько вещей даже с ключевыми кадрами css, но он не работает, как этого добиться?

Answer 1

Добавить прослушиватели событий для событий mouseover и mouseleave ... JQuery с помощью метода css ():

EDIT Вы хотели затухание, извините, используйте fadeIn() и fadeOut()

let $menu = $('.shop-menu');
let $show = $('#shop-menu-div');
$menu.mouseover(function() {  
    $show.fadeIn('slow');
})
$menu.mouseleave(function() { 
    $show.fadeOut('slow');

})

#shop-menu-div {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<li class="shop-menu"><a href="{{url('shop')}}">shop</a></li>

<div id="shop-menu-div">Show this div on hover</div>

JQUERY: вы также можете переключаться между классами, используя переход CSS для непрозрачности

let $menu = $('.shop-menu');
let $show = $('#shop-menu-div');
$menu.mouseover(function() {
  $show.addClass('block').removeClass('none');
})
$menu.mouseleave(function() {
  $show.removeClass('block').addClass('none');

})

.none {
 -webkit-transition: opacity .5s ease-in-out;
  -moz-transition: opacity .5s ease-in-out;
  -ms-transition: opacity .5s ease-in-out;
  -o-transition: opacity .5s ease-in-out;
  opacity: 0;
}

.block {
  -webkit-transition: opacity .5s ease-in-out;
  -moz-transition: opacity .5s ease-in-out;
  -ms-transition: opacity .5s ease-in-out;
  -o-transition: opacity .5s ease-in-out;
  opacity: 1;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<li class="shop-menu"><a href="{{url('shop')}}">shop</a></li>

<div id="shop-menu-div" class="none">Show this div on hover</div>

Answer 2

с дисплеем, вы не можете его затемнить, попробуйте opacity:1 и opacity:0 с переходом, и вы могли бы сделать это даже без jQuery pure css или для jQuery попробуйте $("#myDiv").animate({opacity:0},speed,callback)