基本动画操作----(隐藏,显示,隐藏显示切换,淡入,淡出,淡入淡出切换,滑入,滑出,滑动滑出切换):(自己参考菜鸟教程网站进行学习,点击,进行学习·····)
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Nearth</title> <script src="jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script> <style type="text/css"> #dv{ height: 200px; width:200px; background-color: #FF0000; } </style> <script type="text/javascript"> $(function(){ $("#btnHide").click(function(){ $("#dv").hide(2000); }); $("#btnShow").click(function(){ $("#dv").show(2000); }); $("#btnToggle").click(function(){ $("#dv").toggle(2000); }) $("#btnFadein").click(function(){ $("#dv").fadeIn(2000); }); $("#btnFadeout").click(function(){ $("#dv").fadeOut(2000); }); $("#btnFadeTaggle").click(function(){ $("#dv").fadeToggle(2000); }); $("#btnslideUp").click(function(){ $("#dv").slideUp(2000); }); $("#btnslideDown").click(function(){ $("#dv").slideDown(2000); }); $("#btnslideToggle").click(function(){ $("#dv").slideToggle(2000); }) }) </script> </head> <body> <h1>基本动画操作----(隐藏,显示,隐藏显示切换,淡入,淡出,淡入淡出切换,滑入,滑出,滑动滑出切换)</h1> <hr > <input type="button" name="" id="btnHide" value="隐藏" /> <input type="button" name="" id="btnShow" value="显示" /> <input type="button" name="" id="btnToggle" value="隐藏显示切换" /> <hr > <input type="button" name="" id="btnFadein" value="淡入" /> <input type="button" name="" id="btnFadeout" value="淡出" /> <input type="button" name="" id="btnFadeTaggle" value="淡入淡出切换" /> <hr > <input type="button" name="" id="btnslideUp" value="滑入" /> <input type="button" name="" id="btnslideDown" value="滑出" /> <input type="button" name="" id="btnslideToggle" value="滑入滑出切换" /> <hr > <div id="dv"> </div> </body> </html>
运行结果:
Nearth===>WEB前端--第18课/JQuery/基本动画操作----(隐藏,显示,隐藏显示切换,淡入,淡出,淡入淡出切换,滑入,滑出,滑动滑出切换)
最新推荐文章于 2019-11-16 17:30:09 发布