slideDown
它的意思是显示 , 并不代表滑动方向
slideUp
他的意思是隐藏 , 并不代表滑动方向 , 无论slideDown的滑动方向如何 , slideUp总是反方向滑动隐藏 , 而且不适用于通过 visibility:hidden 隐藏的元素
既然up和Down都不代表滑入方向 , 那么怎么设置滑动方向呢? 先看以下代码
<style type="text/css">
div{ /*加个宽高颜色,看的清楚*/
width: 200px;
height: 300px;
background: red;
display: none;
}
button{
position: absolute;
top:320px;
}
</style>
<body>
<div></div>
<button>被定位的按钮</button>
</body>
<script src="js/jquery-3.5.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$("button").click(function() {
$("div").slideDown(1000);
});
});
</script>
其运行结果为从上到下
更改滑动方向的方法为 : 保持位置不变的滑就加一个父元素 , 使父元素相对定位 , 子元素绝对定位 , 且子元素定位方向为从下定位
slideDown的滑动方向就是与子元素绝对定位的时候是从top算还是从bottom算有关 , top的话就是从上向下滑(默认) , bottom的话就是从下向上滑
<style type="text/css">
header{
width: 200px;
height: 300px;
position: relative; /*父元素相对定位*/
}
div{ /*加个宽高颜色,看的清楚*/
width: 200px;
height: 300px;
background: red;
display: none;
position: absolute; /*子元素绝对定位*/
bottom: 0; /*从下开始算距离*/
}
button{
position: absolute;
top:320px;
}
</style>
<body>
<header>
<div></div>
</header>
<button>被定位的按钮</button>
</body>
<script src="js/jquery-3.5.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$("button").click(function() {
$("div").slideDown(1000);
});
});
</script>
再看一下运行结果
想探寻深层次的原因,我们先来放慢滑入的时间 , 在页面F12观察子元素的变化
$(document).ready(function() {
$("button").click(function() {
$("div").slideDown(100000);
//慢点好观察
});
});
我们可以看到,只有高度在发生改变 , 所以slideDown其实就是通过改变高度完成动画效果 , 可以吧slideDown看做是一个正在长个的人 , 咱们给子元素通过bottom定位 , 那slideDown就会从下开始往上生长 , top的话就是从上往下开始生长
2568
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
