jQuery效果-淡入淡出
jQuery 效果 淡入淡出
2023-09-11 14:22:19 时间
fadein
html
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>jquery</title> <script type="text/javascript" src="js/jquery-3.0.0.min.js"></script> <script type="text/javascript" src="js/try.js" ></script> </head> <style> #div1 { display:none; width:100px; height:100px ; background-color:seagreen ; } #div2 { display:none; width:80px; height:80px ; background-color:skyblue ; } #div3 { display:none; width:60px; height:60px ; background-color:salmon ; } </style> <body> <button id="fadein"> fadein </button> <div id="div3" ></div> <br> <div id="div2" ></div> <br> <div id="div1" ></div> <br> </body> </html>
try.js
$(document).ready(function(){ $("#fadein").on("click",function(){ $("#div1").fadeIn(3000); $("#div2").fadeIn(2000); $("#div3").fadeIn(1000); }) });
fadeout
html
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>jquery</title> <script type="text/javascript" src="js/jquery-3.0.0.min.js"></script> <script type="text/javascript" src="js/try.js" ></script> </head> <style> #div1 { display:none; width:100px; height:100px ; background-color:seagreen ; } #div2 { display:none; width:80px; height:80px ; background-color:skyblue ; } #div3 { display:none; width:60px; height:60px ; background-color:salmon ; } </style> <body> <button id="fadein"> fadein </button> <button id="fadeout"> fadeout </button> <div id="div3" ></div> <br> <div id="div2" ></div> <br> <div id="div1" ></div> <br> </body> </html>
try.js
$(document).ready(function(){ $("#fadein").on("click",function(){ $("#div1").fadeIn(3000); $("#div2").fadeIn(2000); $("#div3").fadeIn(1000); }) $("#fadeout").on("click",function(){ $("#div1").fadeOut(3000); $("#div2").fadeOut(2000); $("#div3").fadeOut(1000); }) });
效果:
toggle
html
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>jquery</title> <script type="text/javascript" src="js/jquery-3.0.0.min.js"></script> <script type="text/javascript" src="js/try.js" ></script> </head> <style> #div1 { display:none; width:100px; height:100px ; background-color:seagreen ; } #div2 { display:none; width:80px; height:80px ; background-color:skyblue ; } #div3 { display:none; width:60px; height:60px ; background-color:salmon ; } </style> <body> <button id="fadein"> fadein </button> <button id="fadeout"> fadeout </button> <button id="toggle"> toggle </button> <div id="div3" ></div> <br> <div id="div2" ></div> <br> <div id="div1" ></div> <br> </body> </html>
js
$(document).ready(function(){ $("#fadein").on("click",function(){ $("#div1").fadeIn(3000); $("#div2").fadeIn(2000); $("#div3").fadeIn(1000); }) $("#fadeout").on("click",function(){ $("#div1").fadeOut(3000); $("#div2").fadeOut(2000); $("#div3").fadeOut(1000); }) $("#toggle").on("click",function(){ $("#div1").toggle(3000); $("#div2").toggle(2000); $("#div3").toggle(1000); }) });
效果:
fadeto
html
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>jquery</title> <script type="text/javascript" src="js/jquery-3.0.0.min.js"></script> <script type="text/javascript" src="js/try.js" ></script> </head> <style> #div1 { display:none; width:100px; height:100px ; background-color:seagreen ; } #div2 { display:none; width:80px; height:80px ; background-color:skyblue ; } #div3 { display:none; width:60px; height:60px ; background-color:salmon ; } </style> <body> <button id="fadein"> fadein </button> <button id="fadeout"> fadeout </button> <button id="toggle"> toggle </button> <button id="fadeto"> fadeto </button> <div id="div3" ></div> <br> <div id="div2" ></div> <br> <div id="div1" ></div> <br> </body> </html>
js
$(document).ready(function(){ $("#fadein").on("click",function(){ $("#div1").fadeIn(3000); $("#div2").fadeIn(2000); $("#div3").fadeIn(1000); }) $("#fadeout").on("click",function(){ $("#div1").fadeOut(3000); $("#div2").fadeOut(2000); $("#div3").fadeOut(1000); }) $("#toggle").on("click",function(){ $("#div1").toggle(3000); $("#div2").toggle(2000); $("#div3").toggle(1000); }) $("#fadeto").on("click",function(){ $("#div1").fadeTo(3000,0.3); $("#div2").fadeTo(2000,0.5); $("#div3").fadeTo(1000,0.7); }) });
效果:
相关文章
- CSS,Jquery精美进度条和滑动条(滑块)插件
- jQuery显示隐藏密码插件jquery.toggle-password演示
- jQuery插件开发 总结
- jQuery事件流的顺序
- jQuery源码分析系列(35) : Ajax - jsonp的实现与原理
- jQuery插件 -- Form表单插件jquery.form.js
- jQuery源码-美元背后的一点小技巧
- jQuery实现ie浏览器兼容placeholder效果
- Jquery焦点图/幻灯片效果 插件 KinSlideshow
- 使用jquery的方法和技巧2,点击多选框的jquery响应
- [JQuery]用InsertAfter实现图片走马灯展示效果
- 网页引导:jQuery插件实现的页面功能介绍引导页效果
- SAP UI5页面动画效果的实现,实际借用了jQuery的库文件
- jQuery实现动态数字展示效果demo效果示例(整理)
- js jquery vue 网络请求封装 服务器 后台
- jquery获取data-xxx自定义属性的值遇到的问题
- 使用jquery实现省市二级列表
- jQuery中$(function(){})与(function($){})(jQuery)、$(document).ready(function(){})等的区别详细讲解
- jquery案例9——网站品牌列表展开收起效果
- 使用jQuery实现点击页面时,出现心型特效,几秒后消失的效果案例