jQuery hide()动画向右滑动

Question

使用jQuery的hide()函数和可选的持续时间参数，我能够让网站上的一些警报框优雅地滑出屏幕并消失。

似乎默认的隐藏动画方向是向左滑动，尽管这种行为在hide()定义页面中没有定义。

我需要有选择地让框也向右滑动或向上滑动。

同样重要的是，如果这种行为没有定义，我担心不同的浏览器可能会以不同的方式呈现动画。因此，我也希望确保一致性。

滑动到左侧的行为在哪里定义？切换到向右滑动或向上滑动的最简单方法是什么？

$(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/

- Michael Benjamin

---

你介意使用jQueryUI吗？ - Hunter Turner

@HunterTurner，我正在寻找轻量级的解决方案。如果符合要求，我很乐意尝试。谢谢。 - Michael Benjamin

你可以使用类似于Animate CSS中jquery fn.extend的方法。让我来制作一个演示，看看它是否是一个好的解决方案。你可以使用@keyframes来实现任何你想要的动画效果。 - Ricky Ruiz

Answer 1

如果您包含了jQueryUI，您可以使用他们的hide方法，这将允许您指定一个方向。

jQueryUI

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

JSFiddle

- Hunter Turner

Answer 2

以下代码中使用jQuery .animate() 方法，是否可行？

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

- frnt

Answer 3

在这个回答中，我想要强调并澄清这一句话：

看起来默认的隐藏动画方向是向左滑动

该动画没有“方向”，它只是根据元素实际框的行为以及与元素相对应的自身动画，并适应元素的增长方式。被动画处理的尺寸属性有：

Width // Height

由于普通元素从其左上角开始增长，所以您会看到它向左移动。

---

如果您改变框的行为，例如使用float，则会看到另一种行为。

Jsfiddle演示

- DaniP

---

这是我的原始样例，包含 body { direction: rtl; }: https://jsfiddle.net/n0zpev0v/3/ - Michael Benjamin

这真的很好，@Michael_B 没有考虑过 direction 作为一种可能性。 - DaniP

Answer 4

你可以使用类似于animate.css的方法。

你可以创建一个fn.extend，像这样：

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

您可以根据自己的喜好进行自定义，例如，我们添加了一个animationName，它将是CSS文件中的一个@keyframe和类。

例如：

.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)
  }
}

然后是毫秒级的speed参数，以及一个布尔型的isForwards参数，模拟了forwards属性的animation-fill-mode值。

---

代码片段：

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

---

作为一则附注，我建议使用jQuery的.on()方法来添加事件处理程序，而不是使用click()。这里是原因。

- Ricky Ruiz