<!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. BZOJ1367 [Baltic2004]sequence

    现学的左偏树...这可是道可并堆的好题目. 首先我们考虑z不减的情况: 我们发现对于一个区间[l, r],里面是递增的,则对于此区间最优解为z[i] = t[i]: 如果里面是递减的,z[l] = z ...

  2. SSH配置动态数据源

    用到一个项目,需要整合2个不同的数据库! 现将代码贴下,以备后用: 1.创建静态映射类,该类映射动态数据源 public class DataSourceMap { public static fin ...

  3. 如何快速查找IP归属地

    这两天遇到这么一个问题,就是查找一个IP的归属地.当然我会有一个IP段的分配列表,格式如下: 16777472    16778239    XX省 XX市 第一列是IP段的起始IP,第二列是IP段的 ...

  4. [转].net自定义configSections的5个示例

    本文转自:http://www.yongfa365.com/item/configuration-configSections-SingleTagSectionHandler-DictionarySe ...

  5. graph | Max flow

    最大流算法,解决的是从一个起点到一个终点,通过任何条路径能够得到的最大流量. 有个Edmond-Karp算法: 1. BFS找到一条增广路径:算出这条路径的最小流量(所有边的最小值)increase: ...

  6. 字符编解码的故事（ASCII，ANSI，Unicode，Utf-8区别）

    (关于字符编码的深入解释,请参见我的原创文章<关于字符编码,你所需要知道的>.) 此文为转载,有少许修订,原文出处不详. 很久很久以前,有一群人,他们决定用8个可以开合的晶体管来组合成不同 ...

  7. NOJ 1643 阶乘除法（YY+小技巧）

    [1643] 阶乘除法 时间限制: 5000 ms 内存限制: 65535 K 问题描述 输入两个正整数 n, m,输出 n!/m!,其中阶乘定义为 n!= 1*2*3*...*n (n>=1) ...

  8. HTML: css 修飾文本和字體

    因爲這個我認爲不用記,所以關於css 修飾文本&字體的屬性只需要打開css手冊,找到(屬性 > 文本) & (屬性 > 字體)翻看即可. 關於字體屬性: Propertie ...

  9. memcached学习笔记6--浅谈memcached的机制 以及 memcached细节讨论

    附:请浅谈memcached的机制 答: ①基于C/S架构,协议比较简单 c/s架构,此时memcached为服务器端,我们可以使用如PHP,c++/c等程序连接memcached服务器. memca ...

  10. PIVOT 用于将列值旋转为列名

    PIVOT 用于将列值旋转为列名(即行转列),在 SQL Server 2000可以用聚合函数配合CASE语句实现 PIVOT 的一般语法是:PIVOT(聚合函数(列) FOR 列 in (…) )A ...