jQuery hide()动画向右滑动

Question

使用hide()带有可选持续时间参数的jQuery 函数,我能够在我的网站上获得一些警报框,以便优雅地滑出屏幕并消失.

看起来隐藏动画的默认方向是向左滑动,尽管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/

Answer 1

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

jQueryUI的

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

的jsfiddle

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>