Jquery--动画
来源:互联网 发布:知乎社区 编辑:程序博客网 时间:2024/09/21 06:49
1、显示/隐藏
hide():隐藏
将高度、宽度、透明度变为0;display为“none”
show():显示
将高度、宽度、透明度变为初始的CSS设置的样式;display为“block”
toggle():切换
如果display为none的时候,点击一下就变成了block,反之变为none
代码:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head> <meta http-equiv="Content-Type" content="text/html" charset="utf-8"> <title></title> <script src="../jquery-3.2.1.min.js"></script> <style> #div1{ width: 1000px; height: 1000px; background-color: red; } </style></head><body> <div id="div1"></div> <button id="btnhide">隐藏</button> <button id="btnshow">出现</button> <button id="btntoggle">切换</button></body><script> $("#btnhide").click(function(){ $("#div1").hide(1); }); $("#btnshow").click(function(){ $("#div1").show(3000); }); $("#btntoggle").click(function(){ $("#div1").toggle(9999); });</script></html>
2、淡入/淡出
fadeIn():淡入
将隐藏的样式通过改变其透明度(透明度从0-1),让它显示
fadeOut():淡出
将显示的样式通过改变其透明度(透明度从1-0),让它隐藏起来
fadeToggle():淡入淡出的切换
如果样式隐藏,则将它显示出来
如果样式显示,则将它隐藏起来
fadeTo():固定其透明度(透明度在0-1之间)
代码:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head> <meta http-equiv="Content-Type" content="text/html" charset="utf-8"> <title></title> <script src="../jquery-3.2.1.min.js"></script> <style> #div1{ width: 100px; height: 100px; background-color: red; display: none; } </style></head><body> <div id="div1"></div> <button id="btnfadein">淡出</button> <button id="btnfadeout">淡入</button> <button id="btnfadetoggle">切换</button> <button id="btnfadeto">固定</button></body><script> $("#btnfadein").click(function () { $("#div1").fadeIn("10000"); }); $("#btnfadeout").click(function(){ $("#div1").fadeOut("10000"); }); $("#btnfadetoggle").click(function () { $("#div1").fadeToggle(); }); $("#btnfadeto").click(function () { $("#div1").fadeTo("slow",0.5); })</script></html>
3、上滑/下滑
slideup():上滑
将设置的高度从初始变为0,然后隐藏它
slidedown():下滑
将设置的高度从0变为初始
slideToggle():下滑和上滑的切换
如果元素是隐藏的,则先显示,后把它的高度增加
如果元素是显示的,现将高度减为0,再隐藏它。
代码:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head> <meta http-equiv="Content-Type" content="text/html" charset="utf-8"> <title></title> <script src="../jquery-3.2.1.min.js"></script> <style> #div1{ width: 1000px; height: 1000px; background-color: red; } </style></head><body> <div id="div1"></div> <button id="btnSlideup">上滑</button> <button id="btnSlideDown">下滑</button> <button id="btnSlideToggle">切换</button></body><script> $("#btnSlideup").click(function () { $("#div1").slideUp(5000/*function () { alert("上滑了"); }*/); }); $("#btnSlideDown").click(function () { $("#div1").slideDown(5000); }); $("#btnSlideToggle").click(function () { $("#div1").slideToggle(5000); })</script></html>
4、动画
$("#btn").click(function () { //设置多个CSS属性 /* $("#div1").animate({left:'200px',top:'300'});*/ //设置相关属性 $("#div1").animate({ left:'300px', width: '+=100px', height: '+=100px', opacity: '0.5' })});
改变预定义值来实现我们所需要的内容的显示或隐藏
$("#div1").animate({ width: 'toggle'})
<body> <button id="start">开始</button> <button id="stop">停止</button> <div style="width: 200px;height: 200px;background-color: blue"></div></body><script> $("#start").click(function () { $("div").animate({height:'500px'},"slow") $("div").animate({width:'500px'},"slow") $("div").animate({height:'200px'},"slow") $("div").animate({width:'200px'},"slow") }) $("#stop").click(function () { $("div").stop(true); })</script>
.animate()中有三个参数:
第一个参数是需要改变的样式
第二个参数是显示的速度(slow,fast,毫秒数)
第三个参数是回调函数
5、结束动画
动画在进行的过程中是可以停止的
<body> <button id="start">开始</button> <button id="stop">停止</button> <div style="width: 200px;height: 200px;background-color: blue"></div></body><script> $("#start").click(function () { $("div").animate({height:'500px'},"slow") $("div").animate({width:'500px'},"slow") $("div").animate({height:'200px'},"slow") $("div").animate({width:'200px'},"slow") }) $("#stop").click(function () { $("div").stop(); })</script>
阅读全文
0 0
- jQuery动画
- jquery动画
- jQuery动画
- jQuery动画
- jQuery动画
- jquery 动画
- JQuery动画
- jquery 动画
- jQuery动画
- jquery动画
- jquery动画
- jQuery-动画
- jquery动画
- jquery动画
- jQuery动画
- jQuery动画
- jQuery动画
- jquery 动画
- DLL动态链接库的工作原理
- NYOJ【77】开灯问题【思维】
- <<剑指Offer>>java实现(每日更新)
- Toast介绍(借鉴郭霖老师著作)
- Linux内核|实验七 系统调用实验
- Jquery--动画
- 机器学习实战-朴素贝叶斯
- Linux环境下Redis安装搭建
- Rikka with Subset HDU
- sklearn.preprocessing的部分用法
- 反转单词顺序列
- Ext JS DomHelper操作类
- HDU 1079-Calendar Game
- tensorboard无法显示的原因(在Windows下)