使用 jQuery 的hide()使用可选的持续时间参数的函数，我可以在我的网站上获得一些警报框，以优雅地滑出屏幕并消失。
隐藏动画的默认方向似乎是向左滑动，尽管此行为未在hide()定义页 http://api.jquery.com/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/ https://jsfiddle.net/n0zpev0v/
如果包含 jQueryUI，则可以使用它们的 hide 方法，该方法允许您指定方向。
jQueryUI
hide("slide", {direction: "right"}, 1000);
JSFiddle https://jsfiddle.net/n0zpev0v/4/
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
