animate实现动画效果
2015-07-28 09:59
295 查看
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <!--<script src="../../JQuery/jquery-2.1.4.min.js"></script>--> <script src="../../JQuery/jquery-1.4.2.min.js"></script> <link href="../../CSS/2-7.css" rel="stylesheet" /> <title>使用animate实现动画效果</title> <script type="text/javascript"> $(function () { $("#btn").click(function () { $("#box").animate({ height: "500px" }); //此方法操作div,可以使div样式不会还原,操作span则会在动画效果完成后还原之前样式。 } ) $(".btn1").click(function () { $("#box").animate({ height: "300px" }); //此方法操作div,可以使div样式不会还原,操作span则会在动画效果完成后还原之前样式。 } ) }) </script> </head> <body> <div> <span id="spnMove">Span Move</span> </div> <div id="box" style="background: #98bf21; height: 100px; width: 100px; margin: 6px;"></div> <button class="btn1">Animate</button> <input type="button" id="btn" value="animate" /> </body> </html>
相关文章推荐
- 减治法
- 当前栏目添加样式
- Mysql(用户相关命令)查看所有用户及权限、删除创建用户等命令
- 详解JavaScript ES6中的Generator
- 使用svn开发,目录的约定与开发流程
- Division,Uva725
- COM技术学习
- UltraEdit 配置 shell 语法高亮
- Dubbo官网
- SAP、ORACLE、用友、金蝶四大ERP软件供应商的区别
- .Net应用程序框架
- 良品铺子或签《爸3》萌娃,电视真人秀植入代言人成新玩法
- 帧布局FrameLayout学习笔记
- IMovePointFeedBack残影问题
- Spring Data Redis 键乱码
- nodeJs 使用npm把模块设置成全局命令后报错
- vtk 使用静态版本出现no override found for vtkpolydatamapper
- 开通博客的第一天和这些年做程序员的感受
- HangOver
- maven pom编写