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/
If you include jQueryUI, you can use their hide method, which will allow you to specify a direction.
jQueryUI
hide("slide", {direction: "right"}, 1000);
JSFiddle
Is that okay to use jQuery .animate()
method, as below.
$(document).ready(function() {
$("#close-alert-box-urgent").click(function() {
$("#alert-box-urgent").animate({
'margin-left' : "50%",
'opacity' : '0',
},500);
});
$("#close-alert-box-news").click(function() {
$("#alert-box-news").animate({
'margin-top' : "-50%",
'opacity' : '0'
},500);;
});
});
body{
overflow-x:hidden;
}
.alert-box {
width: 50vw;
position: relative;
margin: 20px auto;
border: 1px solid black;
display:block;
}
.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 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 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>
On this answer I just want to point and clarify this line:
It appears that the default direction for the hide animation is slide left
That animation has no "direction" it just animate the element itself in relation with the actual box behavior of the element and fit with how the element grows. The properties for the dimensions that are animated are:
Width // Height
Since a normal element grows from their upper left point that's why you see it going to the left.
If you change the behavior of the box for example with float
you will see another behavior.
You can use a similar method to that of animate.css.
You would create a fn.extend
like this:
$.fn.extend({
animateAlert: function(animationName, speed, isForwards) {
var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';
this.addClass('animated ' + animationName).css("animation-duration", speed + "ms");
if (!isForwards) {
this.one(animationEnd, function() {
$(this).removeClass('animated ' + animationName);
});
}
}
});
You can customize it however you like, in this example we add an animationName
which will be a @keyframe
and a class in your CSS file.
For example:
.slideOutUp {
-webkit-animation-name: slideOutUp;
animation-name: slideOutUp
}
@keyframes slideOutUp {
0% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0)
}
100% {
visibility: hidden;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0)
}
}
Then speed
which will be in miliseconds, and isForwards
as a boolean, simulating the forwards
animation-fill-mode
value.
$.fn.extend({
animateAlert: function(animationName, speed, isForwards) {
var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';
this.addClass('animated ' + animationName).css("animation-duration", speed + "ms");
if (!isForwards) {
this.one(animationEnd, function() {
$(this).removeClass('animated ' + animationName);
});
}
}
});
$(document).ready(function() {
$("#close-alert-box-urgent").on("click", function() {
$("#alert-box-urgent").animateAlert('slideOutUp', 6000);
});
$("#close-alert-box-news").on("click", function() {
$("#alert-box-news").animateAlert('slideOutUp', 500, true);
});
});
.alert-box {
width: 50vw;
position: relative;
margin: 20px auto;
border: 1px solid black;
}
.alert-box-close {
position: absolute;
top: -12px;
right: -12px;
cursor: pointer;
}
.animated {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
.slideOutUp {
-webkit-animation-name: slideOutUp;
animation-name: slideOutUp
}
@keyframes slideOutUp {
0% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0)
}
100% {
visibility: hidden;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0)
}
}
<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 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 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>
jsFiddle
$.fn.extend({
animateAlert: function(animationName, speed, isForwards) {
var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';
this.addClass('animated ' + animationName).css("animation-duration", speed + "ms");
if (!isForwards) {
this.one(animationEnd, function() {
$(this).removeClass('animated ' + animationName);
});
}
}
});
$(document).ready(function() {
$("#close-alert-box-urgent").on("click", function() {
$("#alert-box-urgent").animateAlert("rotateOutUpRight", 500, true);
});
$("#close-alert-box-news").on("click", function() {
$("#alert-box-news").animateAlert("zoomOutDown", 500, true);
});
});
.alert-box {
width: 50vw;
position: relative;
margin: 20px auto;
border: 1px solid black;
}
.alert-box-close {
position: absolute;
top: -12px;
right: -12px;
cursor: pointer;
}
.animated {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
.slideOutUp {
-webkit-animation-name: slideOutUp;
animation-name: slideOutUp
}
@keyframes slideOutUp {
0% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0)
}
100% {
visibility: hidden;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0)
}
}
@keyframes zoomOutDown {
40% {
opacity: 1;
-webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
-webkit-animation-timing-function: cubic-bezier(0.55, .055, .675, .19);
animation-timing-function: cubic-bezier(0.55, .055, .675, .19)
}
100% {
opacity: 0;
-webkit-transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
-webkit-transform-origin: center bottom;
transform-origin: center bottom;
-webkit-animation-timing-function: cubic-bezier(0.175, .885, .32, 1);
animation-timing-function: cubic-bezier(0.175, .885, .32, 1)
}
}
.zoomOutDown {
-webkit-animation-name: zoomOutDown;
animation-name: zoomOutDown
}
@keyframes rotateOutUpRight {
0% {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
opacity: 1
}
100% {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: rotate3d(0, 0, 1, 90deg);
transform: rotate3d(0, 0, 1, 90deg);
opacity: 0
}
}
.rotateOutUpRight {
-webkit-animation-name: rotateOutUpRight;
animation-name: rotateOutUpRight
}
<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 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 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>
As a side note I recommend using the .on()
jQuery method for attaching event handlers instead of using click()
. Here's why.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With