jQuery中滑入滑出动画的方向问题

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的话就是从上往下开始生长

jQuery中滑入滑出动画的方向问题相关推荐

在 jQuery 中使用滑入滑出动画效果，实现二级下拉导航菜单的显示与隐藏效果
查看本章节查看作业目录需求说明: 在 jQuery 中使用滑入滑出动画效果,实现二级下拉导航菜单的显示与隐藏效果用户将光标移动到"最新动态页"或"帮助查询" ...
jQuery学习笔记系列（一）——入口函数，jQuery对象和DOM对象，jQuery选择器、样式操作、效果（显示隐藏、滑入滑出、淡入淡出、自定义动画、停止动画队列）
day01 - jQuery 学习目标: 能够说出什么是 jQuery 能够说出 jQuery 的优点能够简单使用 jQuery 能够说出 DOM 对象和 jQuery 对象的区别能够写出常用的 ...
JQuery动画之滑入滑出动画
1. 滑入动画(类似于商店的卷帘门) $(selector).slideDown(speed, 回调函数); 解释: 此语句实现的功能为, 在XX时间内, 下拉动画, 显现元素. 当 slideDow ...
jquery效果显示隐藏滑入滑出
jquery jquery效果 jquery 给我们封装了很多动画效果,最为常见的如下: 显示隐藏:show() / hide() / toggle() ; 滑入滑出:slideDown() / sl ...
Android Fragment切换动画(滑入滑出)
之前写过一篇Activity切换动画的文章Activity切换动画(滑入滑出) 本文还采用滑入滑出的方式,贴一下Fragment之间切换动画的实现,Fragment比Activity需要多考虑一点 a ...
fullpage.js 滑入滑出滚屏动画, 纯css方式。利用css权重,无需js操作dom
**完整案例在下方** 1.分析如下图所示, 一共8屏, 当前在第2屏上,fullpage.js 会在当前可视屏的最外层div上,插入一个active的class,根据框架添加外层的active动态 ...
html5页面滑入滑出效果,jQuery实现的淡入淡出与滑入滑出效果示例
本文实例讲述了jQuery实现的淡入淡出与滑入滑出效果.分享给大家供大家参考,具体如下: 1. 淡入淡出效果: 我们做这样一个实例: 有两个按钮,点击淡入,有一个div层淡入,点击淡出,div层淡出: ...
【动画】左右滑入滑出效果、transition使用
左右滑入滑出文章目录左右滑入滑出用transition 不用transition 用transition <transition name="le ...
css上滑事件,css transition 实现滑入滑出
transition是css最简单的动画. 通常当一个div属性变化时,我们会立即看的变化,从旧样式到新样式是一瞬间的,嗖嗖嗖!!! 但是,如果我希望是慢慢的从一种状态,转变成另外一种状态,怎么办? ...
用原生js完成鼠标点击显示滑入滑出效果
最近用原生js做项目练手,自己尝试做了下,可以直接复制代码看效果 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta ch ...

jQuery中滑入滑出动画的方向问题

jQuery中滑入滑出动画的方向问题相关推荐

最新文章

热门文章