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