jQuery hide()动画向右滑动 [英] jQuery hide() animation slide right

问题描述

使用jQuery的hide()函数和可选的duration参数，我可以在我的网站上看到一些警报框，以从屏幕上平滑滑动并消失.

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.

尽管中未定义此行为，但似乎隐藏动画的默认方向是向左滑动 hide() 定义页面.

我需要选择使框也向右滑动或向上滑动.

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/

推荐答案

如果包含jQueryUI，则可以使用其hide方法，这将允许您指定方向.

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

JSFiddle

这篇关于jQuery hide()动画向右滑动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！