Michael_B Michael_B - 1 month ago 20
CSS Question

jQuery hide() animation slide right

Using jQuery's

hide()
function with the optional duration parameter I'm able to get some alert boxes on my site to gracefully slide off screen and disappear.

It appears that the default direction for the hide animation is slide left, although this behavior isn't defined in the
hide()
definition page
.

I need to have the option to make the boxes also slide right or slide up.

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.

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



$(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');
});
});

.alert-box {
width: 50vw;
position: relative;
margin: 20px auto;
border: 1px solid black;
}
.alert-box-close {
position: absolute;
top: -12px;
right: -12px;
cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>

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

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





https://jsfiddle.net/n0zpev0v/

Answer

If you include jQueryUI, you can use their hide method:

jQueryUI

hide("slide", {direction: "right" }, 1000);

JSFiddle