综合运用HTML、CSS与jQuery制作一个二级水平导航，且二级导航显示与隐藏时具有下滑与上滑的动画效果。请将代码写出：

HTML代码：

<nav>
  <ul>
    <li><a href="#">导航1</a></li>
    <li><a href="#">导航2</a>
      <ul>
        <li><a href="#">子导航1</a></li>
        <li><a href="#">子导航2</a></li>
        <li><a href="#">子导航3</a></li>
      </ul>
    </li>
    <li><a href="#">导航3</a></li>
    <li><a href="#">导航4</a></li>
  </ul>
</nav>

CSS代码：

nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
nav ul li {
  display: inline-block;
  position: relative;
  margin-right: 20px;
}
nav ul li ul {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #fff;
  padding: 10px;
  border-radius: 5px;
  box-shadow: 0 1px 6px rgba(0,0,0,.2);
}
nav ul li:hover ul {
  display: block;
  animation: slideDown .3s ease-in-out;
}
nav ul li ul li {
  display: block;
  margin: 10px 0;
}
@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

jQuery代码：

$(document).ready(function () {
  $('nav ul li').hover(function () {
    $(this).find('ul').stop().slideDown(300);
  }, function () {
    $(this).find('ul').stop().slideUp(300);
  });
});

通过以上代码，我们可以实现一个下拉式的二级水平导航，并且拥有下滑与上滑的动画效果。