<!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>

animate实现动画效果的更多相关文章

  1. vue中使用transition和animate.css动画效果

    一.单个动画中,使用div中引用animate动画 1.下载依赖 npm install animate.css –save 2.main.js中全局引用 import animate from 'a ...

  2. jquery插件——点击交换元素位置（带动画效果）

    一.需求的诞生 在我们的网页或者web应用中,想要对列表中的元素进行位置调整(或者说排序)是一个常见的需求.实现方式大概就以下两种,一种是带有类似“上移”.“下移”的按钮,点击可与相邻元素交换位置,另 ...

  3. jquery animate 动画效果使用解析

    animate的意思是:使有生气:驱动:使栩栩如生地动作:赋予…以生命作为形容词:有生命的:活的:有生气的:生气勃勃的 先看动画效果:http://keleyi.com/keleyi/phtml/jq ...

  4. jQuery动画效果animate和scrollTop结合使用实例

    CSS属性值是逐渐改变的,这样就可以创建动画效果.只有数字值可创建动画(比如 "margin:30px").字符串值无法创建动画(比如 "background-color ...

  5. animate.css 一些常用的CSS3动画效果

    大家已经开始在项目中使用一些CSS3动画效果了吧,这让网站在高端浏览器上看起来很上流.animate.css是一个老外做的各种CSS3动画的合集,比较全,也很炫,大家可以参考学习一下. 项目主页:ht ...

  6. jquery动画效果---animate()--滚屏

    jquery动画效果---animate()方法---W3school

  7. jQuery之动画效果show()......animate()

    jQuery之动画效果 1.show()显示效果 语法:show(speed,callback) Number/String,Function speend为动画执行时间,单位为毫秒.也可以为slow ...

  8. jQuery animate()动画效果

    1.jQuery动画效果 jQuery animate()方法用于创建自定义动画 $(selector).animate({params},speed,callback); //必需的 params ...

  9. CSS3效果：animate实现点点点loading动画效果（一）

    实现如图所示的点点点loading效果: 一:CSS3 animation实现代码 html代码: 提交订单中<span class="ani_dot">...< ...

随机推荐

  1. TYVJ P1023 奶牛的锻炼 Label：dp

    背景 USACO 描述 奶牛Bessie有N分钟时间跑步,每分钟她可以跑步或者休息.若她在第i分钟跑步,可以跑出D_i米,同时疲倦程度增加1(初始为0).若她在第i分钟休息,则疲倦程度减少1.无论何时 ...

  2. CentOS 拷贝mysql数据库到新的硬盘报错了

    服务器硬盘满了,加了一块,在目录 下新建了 mkdir /mysql cp -r /var/lib/mysql/* /mysql chown -R mysql:root /mysql 更改/etc/m ...

  3. dig 命令详解（转载） - 阿权的书房

    在 unix 和 linux 下,建议大家使用 dig 命令来代替 nslookup. dig 命令的功能比 nslookup 强大很多,不像 nslookkup 还得 set 来 set 去的,怪麻 ...

  4. SDUT 2610 Boring Counting（离散化+主席树区间内的区间求和）

    Boring Counting Time Limit: 3000MS Memory Limit: 65536KB Submit Statistic Discuss Problem Descriptio ...

  5. POJ 1703 Find them, Catch them（种类并查集）

    Find them, Catch them Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 41463   Accepted: ...

  6. 移动Web应用开发入门指南——交互篇

    交互篇 从PC到移动端,视觉和交互是用户能直接感受到的差异.在视觉篇中已经提到,移动设备的物理属性一部分影响到视觉,另外一些部分将影响到交互.那么,移动设备影响交互的物理属性都有哪些变化呢?对于这个问 ...

  7. Linux 计划任务 Crontab 笔记与总结（2）Crontab 的基本组成与配置

    [Crontab 的基本组成] ① 系统服务 CROND:每分钟都会从配置文件刷新定时任务 ② 配置文件 :文件方式设置定时任务 ③ 配置工具 crontab:用途调整定时任务 [配置文件的配置文件格 ...

  8. Linux改变文件或目录的访问权限命令

    使用  ll  或  ls -l 指令时 第一列会显示出目录下文件的权限 例如∶ -rw-r-r- 横线代表空许可.r代表只读,w代表写,x代表可执行.注意这里共有10个位置.第一个字符指定了文件类型 ...

  9. 用thinkphp进行微信开发的整体设计思考

    用thinkphp进行微信开发的整体设计思考 http://www.2cto.com/weixin/201504/388423.html 2015-04-09      0个评论       作者:明 ...

  10. Ecshop、Discuz! 等开源产品的局限

    Ecshop.Discuz! 等开源产品的局限 记得今年年初,我初次接触Discuz!和Ecshop时,一阵阵地惊叹:成熟度这么高的产品,居然是免费的.我们这些搞传统软件开发的要怎么活?另外也奇怪,做 ...