Jquery fadeIn和fadeOut不工作，如何用addclass和MouseOver正确创建fadeIn动画？

Question

基本的想法是，我有商店菜单作为清单

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

shop-menu-div

已经尝试了几件事情，甚至与css关键帧，但它不工作，如何实现这一点？

Answer 1

为mouseover和mouseLeave事件添加事件侦听器...使用css（）方法的JQuery：

编辑您想要淡出，对不起，请使用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>