Jquery fadeIn and fadeOut not working, how to properly create fadein animation with addclass and mouseover?

Question

The base idea is, I have shop menu as list

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

when the shop-menu hovered (mouseover jquery function), I want to fadeIn a div I name it

shop-menu-div

I have successfully pop-up this menu without fade-in animation by having css display:none and then display:contents when hovered by addClass('active)

the thing is, I want this shop-menu-div to fadeIn when hovered and fadeout when mouseleave

have tried several things even with css keyframes but it's not working, how to achieve this?

Answer 1

with display you can't fade it, try opacity:1 and opacity:0 with a transition and you could do it even without jQuery pure css or for jQuery try $("#myDiv").animate({opacity:0},speed,callback)

Answer 2

Add event listeners for the mouseover and mouseleave events... JQuery using css() method:

EDIT You wanted a fade, sorry use fadeIn() and 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: You could also toggle between classes as well using a CSS transition for your opacity

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>