jQuery hide() animation slide right

Question

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/

@HunterTurner, I'm looking for lightweight solutions. If that fits the bill, yes I'm open to it. Thanks. — Michael Benjamin, Oct 18 '16 at 15:26
You can use something similar to what Animate CSS does with its jquery `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. — Ricky Ruiz, Oct 18 '16 at 15:27

Hunter Turner · Accepted Answer · 2016-10-25T14:28:18.860

11

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

edited Oct 25 '16 at 14:28

answered Oct 18 '16 at 15:27

Hunter Turner

6,804
11
41
56

score 5 · Answer 2 · answered Oct 18 '16 at 15:32

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>

score 4 · Answer 3 · edited Jun 20 '20 at 09:12

4

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.

Jsfiddle Demo

edited Jun 20 '20 at 09:12

Community

1
1

answered Oct 18 '16 at 15:38

DaniP

37,813
8
65
74

2

Here's my original fiddle with `body { direction: rtl; }`: https://jsfiddle.net/n0zpev0v/3/ – Michael Benjamin Oct 18 '16 at 15:43
That's really nice @Michael_B haven't think about `direction` as a possibility – DaniP Oct 18 '16 at 15:45

score 2 · Answer 4 · edited May 23 '17 at 10:27

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.

CODE SNIPPET:

$.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>

Playground

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.

jQuery hide() animation slide right

4 Answers4

Jsfiddle Demo

CODE SNIPPET:

Playground

Linked