jQuery hide() animation slide right
<p>Using jQuery's <code>hide()</code> function with the optional duration parameter I'm able to get some alert boxes on my site to gracefully slide off screen and disappear.</p>

<p>It appears that the default direction for the hide animation is slide left, although this behavior isn't defined in the <a href="http://api.jquery.com/hide/" rel="noreferrer"><strong><code>hide()</code></strong> definition page</a>.</p>

<p>I need to have the option to make the boxes also slide right or slide up.</p>

<p>Equally important, if this behavior isn't defined, I'm concerned that different browsers may render the animation in different ways. So I'm also looking to lock in consistency.</p>

<p>Where is the slide left behavior defined? What's the simplest way to switch to slide right or slide up?</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function() {
  $("#close-alert-box-urgent").click(function() {
    $("#alert-box-urgent").hide(1000);
  });
  $("#close-alert-box-news").click(function() {
    $("#alert-box-news").hide('fast');
  });
});</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>.alert-box {
  width: 50vw;
  position: relative;
  margin: 20px auto;
  border: 1px solid black;
}
.alert-box-close {
  position: absolute;
  top: -12px;
  right: -12px;
  cursor: pointer;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;
&lt;/script&gt;

&lt;article class="alert-box" id="alert-box-urgent"&gt;
  &lt;h1&gt;Tuition Alert&lt;/h1&gt;
  &lt;p&gt;text text text text text text text text text text text text text text&lt;/p&gt;
  &lt;a class="alert-box-close" id="close-alert-box-urgent"&gt;
    &lt;img src="http://i.imgur.com/czf8yas.png" height="25" width="25" alt=""&gt;
  &lt;/a&gt;
&lt;/article&gt;

&lt;article class="alert-box" id="alert-box-news"&gt;
  &lt;h1&gt;Latest News&lt;/h1&gt;
  &lt;p&gt;text text text text text text text text text text text text text text&lt;/p&gt;
  &lt;a class="alert-box-close" id="close-alert-box-news"&gt;
    &lt;img src="http://i.imgur.com/czf8yas.png" height="25" width="25" alt=""&gt;
  &lt;/a&gt;
&lt;/article&gt;</code></pre>
</div>
</div>
</p>

<p><a href="https://jsfiddle.net/n0zpev0v/" rel="noreferrer">https://jsfiddle.net/n0zpev0v/</a></p>