Animate CSS with jQuery

Question

So I have css that looks like this:

.dropdown{
position:absolute;  
display: none; 
width: 69%;
background-color: #6f6f6f;
margin-right: 35px;
z-index: 999999999;
padding: 3%;
margin-top: 20px;
}
#nav-menu > li:hover > .dropdown{
display: block;
top:auto;
}

this works great however I want to use an effect from the jquery easing plugin on hover

I know there is a show / hide jquery function but it doesn't react as well with with the dropdown (dropdown doesn't always stay shown while the user is interacting with it) as using css which seems to work every single time.

So I'm really just looking to add an effect to the display: none; and then the display:block on hover. forgive me if this is easy, my jquery skills aren't great and I couldn't find an answer anywhere

Fiddle

fiddle

Answer 1

DEMO

DEMO2

Try this

$(document).ready(function () {
$(".menu_right").hover(
  function () {
      $(".dropdown").slideDown();
  },
  function () {
   $(".dropdown").slideUp();
  }
);
});

Hope this helps,Thank you

Answer 2

The issue you have is that when you're on the hovered part, you're entering child elements which causes the main element to think you have hovered out. the solution in Jquery is to use the 'hover method like this:

$(".dropdown").hover(function(){$(this).fadeIn(100);$(this).fadeOut(500);});

The first functions tells JQuery what to do when you hover in, the seconds what to do when you leave it, no matter how many childs are nested inside this element. Obviously this code doesn't make much sense since you can't hover something that is not on you're screen, you have to apply the hover method on the element taht needs to react to the hover, and make some element nested inside him appear.

<div class="dropDownBtn">
  <div class="subelement"></div>
</div>

In this case, you could do something like:

$(".dropdown").hover(function(){$(this).find('.subelement').fadeIn(100);$(this).find('.subelement').fadeOut(500);});