7

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/

3
  • Would you be against using jQueryUI? Commented Oct 18, 2016 at 15:24
  • @HunterTurner, I'm looking for lightweight solutions. If that fits the bill, yes I'm open to it. Thanks. Commented Oct 18, 2016 at 15:26
  • 1
    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
    Commented Oct 18, 2016 at 15:27

4 Answers 4

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

0
5

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>

0
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

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

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.

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.