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>
fn.extend
. Let me work on a demo and see if it is a good solution. You would use@keyframes
for any animation you desire.