jQuery相关方法3----动画相关
2024-09-01 09:55:09
一、显示和隐藏
- show(参数1,参数2)方法和hide(参数1,参数2)方法,动画效果显示和隐藏
- 参数1是时间,单位毫秒(1000毫秒=1秒),也可以是 "slow""normal""fast"
- 参数2是回调函数,在动画执行完以后再执行
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<script>
$(function(){
$("#btn1").click(function(){
$("#dv").show(1000,function(){
console.log("显示完了");
});
});
$("#btn2").click(function(){
$("#dv").hide(1000,function(){
console.log("隐藏完了");
});
});
});
</script>
<input type="button" value="显示" id="btn1">
<input type="button" value="隐藏" id="btn2">
<div id="dv" style="width: 200px;height: 200px;background: red;"></div>
二、滑入和滑出
- slideDown(参数1,参数2)方法和slideUp(参数1,参数2)方法,动画滑入和滑出
- slideToggle(参数1,参数2)方法是切换滑入和滑出
- 参数1是时间,单位毫秒(1000毫秒=1秒),也可以是 "slow""normal""fast"
- 参数2是回调函数,在动画执行完以后再执行
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<script>
$(function(){
$("#btn1").click(function(){
$("#dv").slideDown(1000,function(){
console.log("滑入完了");
});
});
$("#btn2").click(function(){
$("#dv").slideUp(1000,function(){
console.log("滑出完了");
});
});
$("#btn3").click(function(){
$("#dv").slideToggle(1000,function(){
alert("完成了");
});
});
});
</script>
<input type="button" value="滑入" id="btn1">
<input type="button" value="滑出" id="btn2">
<input type="button" value="滑入/出" id="btn3">
<div id="dv" style="width: 200px;height: 200px;background: red;"></div>
三、淡入和淡出
- fadeIn(参数1,参数2)方法和fadeOut(参数1,参数2)方法,动画淡入和淡出
- fadeToggle(参数1,参数2)方法是切换淡入和淡出
- 参数1是时间,单位毫秒(1000毫秒=1秒),也可以是 "slow""normal""fast"
- 参数2是回调函数,在动画执行完以后再执行
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<script>
$(function(){
$("#btn1").click(function(){
$("#dv").fadeIn(1000,function(){
console.log("淡入完了");
});
});
$("#btn2").click(function(){
$("#dv").fadeOut(1000,function(){
console.log("淡出完了");
});
});
$("#btn3").click(function(){
$("#dv").fadeToggle(1000,function(){
console.log("完成了");
});
});
});
</script>
<input type="button" value="淡入" id="btn1">
<input type="button" value="淡出" id="btn2">
<input type="button" value="淡入/出" id="btn3">
<div id="dv" style="width: 200px;height: 200px;background: red;"></div>
四、案例
- 点击图片图片显示和隐藏
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<script>
$(function(){
$("img").click(function(){
$(this).hide(300);
});
});
</script>
<img src="img.jpg" alt="" style="vertical-align: top">
<img src="img.jpg" alt="" style="vertical-align: top">
<img src="img.jpg" alt="" style="vertical-align: top">
<img src="img.jpg" alt="" style="vertical-align: top">
- 点击按钮连续动画
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<script>
$(function(){
//显示
$("#btn1").click(function(){
$("div>img:last").hide(300,function f1(){
$(this).prev().hide(300,f1);
});
});
//隐藏
$("#btn2").click(function(){
$("div>img:first").show(300,function f2(){
$(this).next().show(300,f2);
});
});
});
</script>
<input type="button" value="隐藏" id="btn1">
<input type="button" value="显示" id="btn2">
<div>
<img src="img.jpg" alt="" style="vertical-align: top">
<img src="img.jpg" alt="" style="vertical-align: top">
<img src="img.jpg" alt="" style="vertical-align: top">
<img src="img.jpg" alt="" style="vertical-align: top">
</div>
五、animate（）方法
- animate(参数1,参数2,参数3)方法,动画效果
- 参数1,json键值对----css属性和值
- 参数2,时间,单位毫秒
- 参数3,回调函数
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<script>
$(function(){
$("img").animate({"width":"100px","height":"100px"},1000).animate({"left":"100px","top":"100px"},1000).animate({"opacity":0.5},1000);
});
</script>
<img src="img.jpg" alt="" style="position: absolute;">
最新文章
- linux菜鸟日记
- spring+mybatis 手动开启和提交事务
- C++将类的构造函数、析构函数声明为private或者protected的用途
- rtp h264注意点(FU-A分包方式说明)
- phpmailer,smtp发送邮件实例(转)
- 解决 asp.net 伪静态 IIS设置后 直正HTML无法显示的问题
- HC-05蓝牙模块基本使用
- centos7如何安装pandoc
- createClass方法
- 英语进阶系列-A06-本周总结
- 读高性能MySql笔记
- Touch365现已上架！
- Java内存管理-掌握自定义类加载器的实现（七）
- 快速零配置迁移 API 适配 iOS 对 IPv6 以及 HTTPS 的要求
- ACM找bug方案
- xcode 8 清除无用的打印
- java知识思维图解
- 问题1：jquery实现全选功能，第二次失效（已解决）
- Yarn的资源隔离机制
- linux ad7606 iio