| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title></title> | |
| <script src="js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script> | |
| <!-- | |
| 1.4.1 显示与隐藏 | |
| normal slow fast | |
| 1.4.2 淡入淡出 | |
| 1.4.3 自定义动画------《 | |
| animate | |
| $("#block").animate({ | |
| width: "90%", | |
| height: "100%", | |
| fontSize: "10em", | |
| borderWidth: 10 | |
| }, 1000 ); | |
| 1.4.4 动画停止与延时 | |
| stop([cle],[jum])1.7* | |
| delay(duration,[queueName]) | |
| --> | |
| </head> | |
| <body> | |
| <img src="img/a1.jpg" id="img0" style="position: relative;"/> | |
| <input type="button" id="show" value="显示" /> | |
| <input type="button" id="hide" value="隐藏" /> | |
| <hr /> | |
| <input type="button" id="dr" value="淡入" /> | |
| <input type="button" id="dc" value="淡出" /><BR> | |
| <input type="button" id="zdy" value="自定义动画" /> | |
| <script type="text/javascript"> | |
| $("#show").click(function(){ | |
| $("#img0").show(3000); | |
| }); | |
| $("#hide").click(function(){ | |
| $("#img0").hide(3000); | |
| }); | |
| //------------------- | |
| $("#dr").click(function(){ | |
| $("#img0").fadeIn(2000); | |
| }); | |
| $("#dc").click(function(){ | |
| $("#img0").fadeOut(2000); | |
| }); | |
| //----------------------- | |
| $("#zdy").click(function(){ | |
| $("#img0").animate({ | |
| left: "90%", | |
| }, 1000 ); | |
| }); | |
| </script> | |
| </body> | |
| </html> | |
css动画
最新推荐文章于 2022-10-25 11:57:54 发布
扫一扫
361
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
