js进阶 13-2 jquery动画滑动效果哪些注意事项
2024-10-01 22:52:52
js进阶 13-2 jquery动画滑动效果哪些注意事项
一、总结
一句话总结:滑动里面这里up是隐藏,down是显示。
1、jquery动画默认的两个切换效果是什么(swing默认和linear的区别是什么)?
swing默认和linear,和css里面默认的效果相比少一点
linear,是匀速运动
swing是先慢后快
2、jquery动画如果想使用更多的切换效果,需要怎么办?
需要用插件
3、滑动效果的三个函数和显示隐藏的三个函数有什么异同?
都是三个,参数都是一样,这里是up,down,toggle
这里up是隐藏,down是显示
二、jquery动画滑动效果哪些注意事项
1、滑动
滑动效果也是比较常见的动画效果,比如我们常见的具有滑动效果的下拉菜单
- slideDown():通过调整高度来滑动显示被选元素
语法:$(selector).slideDown([speed],[easing],[fn])
- slideUp():通过调整高度来滑动隐藏被选元素
语法:$(selector),slideUp[speed,[easing],[fn]])
- slideToggle()通过高度变化来切换所有匹配元素的可见性。
语法:$(selector).slideToggle([speed],[easing],[fn])
- 参数说明:
1.speed:三种预定速度之一的字符串("slow","normal",or"fast")或表示动画时长的毫秒数值(如:1000)
2. easing:(Optional)用来指定切换效果, 默认是"swing",可用参数"linear""
3. fn:在动画完成时执行的函数,每个元素执行一次。
2、代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>演示文档</title>
<script type="text/javascript" src="jquery-3.1.1.min.js"></script>
<style type="text/css">
input{width: 100px;height: 30px;}
#div1,#div2,#div3{width: 150px;height: 150px;border:1px solid green;margin-left: 15px;display: inline-block;}
</style>
</head>
<body>
<h3>jQuery动画效果</h3>
<input id="btn1" type="button" value="slideDown">
<input id="btn2" type="button" value="slideUp">
<input id="btn3" type="button" value="slideToggle"><br><br>
<div id="div1"></div><div id="div2"></div><div id="div3"></div>
<script>
// $('#btn3').click(function(){
// $('#div1').toggle(5000,'linear')
// $('#div2').toggle(5000,'swing')
// $('#div3').toggle(5000)
// })
$('#btn1').click(function(){
$('#div1').slideDown(1000)
$('#div2').slideDown(2000)
$('#div3').slideDown(3000)
})
$('#btn2').click(function(){
$('div').slideUp()
})
$('#btn3').click(function(){
$('div').slideToggle()
})
</script>
</body>
</html>
最新文章
- Atitit.log日志技术的最佳实践attilax总结
- [LeetCode] Repeated DNA Sequences 求重复的DNA序列
- Yii2的深入学习--事件Event
- (五)SQL Server分区自动化案例
- 【转】div居中代码 DIV水平居中显示CSS代码
- Android UI组件
- Python设计模式——代理模式(Proxy)
- C#实现文件批量重命名源码下载
- Android更改checkbox的style
- Windows:将cmd命令行添加到右键中方法
- hbase的常用的shell命令&;hbase的DDL操作&;hbase的DML操作
- CF1098B/CF1099E Nice table
- SpringBoot实现标准的OAuth服务提供商
- 【科普】GSM伪基站 劫持 诈骗?用4G网就安全?想强制用4G?最详细的科普教程在此!
- Python学习—基础篇之基本数据类型(一)
- python中用修饰器进行异常日志记录
- hdu4787 AC自动机加分块
- CCCC L2-002. 链表去重
- PL/SQL控制语句(二、循环控制语句)
- NOIP2003 传染病控制 【搜索 + 卡时】