Add ease out effect with jQuery
<p>I need to add an ease effect to the .dropdown div when it becomes visible with jQuery, but I'd be happy to do it with CSS as well. Any ideas? Thanks in advance :)</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>$('.btn').bind('click', function (){
 $(this).parent().next('.dropdown').toggleClass('open');
});</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>.top,
.bottom {
  background: #333;
  height: 50px;
}
.dropdown {
  height: 50px;
  position: absolute;
  color: black;
  visibility: hidden;
}
.open {
  position: relative;
  visibility: visible;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;div class="top"&gt;
  &lt;button class="btn"&gt;Show content&lt;/button&gt;
&lt;/div&gt;
&lt;div class="dropdown"&gt;
  &lt;p&gt;Hidden content&lt;/p&gt;
&lt;/div&gt;
&lt;div class="bottom"&gt;
  
&lt;/div&gt;</code></pre>
</div>
</div>
</p>

<p><a href="https://jsfiddle.net/319zd1sg/1/" rel="nofollow">https://jsfiddle.net/319zd1sg/1/</a></p>