<!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. CentOS6.4 配置LVS（DR模式）

    DR模式中LVS主机与实际服务器都有一块网卡连在同一物理网段上. IP分配 VIP:10.10.3.170 RIP1:10.10.3.140 RIP2:10.10.3.141 1.安装所需的依赖包 y ...

  2. HDU 4632 Palindrome subsequence(DP)

    题目链接 做的我很无奈,当时思路很乱,慌乱之中,起了一个想法,可以做,但是需要优化.尼玛,思路跑偏了,自己挖个坑,封榜之后,才从坑里出来,过的队那么多,开始的时候过的那么快,应该就不是用这种扯淡方法做 ...

  3. Java实现队列

    class Element{ int id; String name; Element(int a,String n){ id=a;name=n; } } class SeqQueue{ int fi ...

  4. Html A标签中 href 和 onclick 同时使用的问题 优先级别

    我们在制作网页的时候用得最多的就是 A 标签 超连接 但有时候需要在 A 里同时用到 href 和 onclick属性 下面我们先来分析一下 ,在不同的浏览器下有不同的效果 1 顺序 ie 6 : h ...

  5. 源码安装Postgresql9.4.1

    1.先到官网下载http://www.postgresql.org/ftp/source/v9.4.1/ tar包 2.解压后执行: sudo apt-get install zlib1g-dev s ...

  6. Spark中加载本地（或者hdfs）文件以及SparkContext实例的textFile使用

    默认是从hdfs读取文件,也可以指定sc.textFile("路径").在路径前面加上hdfs://表示从hdfs文件系统上读 本地文件读取 sc.textFile("路 ...

  7. 给php增加gd库（转）

    1.安装zlib tar zxvf zlib-1.2.3.tar.gz cd zlib-1.2.3 ./configure --prefix=/usr/local/zlib make make ins ...

  8. discuz怎么根据连接知道调用的是什么模板页面

    其实不怎么难,基本都可以看出discuz是怎么样调用模板页面的 这个是论坛的帖子的列表页,看到url就可以看出是forum目录下的forumdisplay这个模板,forumdisplay.html这 ...

  9. MyBatis+springMVC+easyUI (dataGirl)实现分页

    页面展示效果. 页面代码: <%@ page contentType="text/html;charset=UTF-8" language="java"  ...

  10. PHP 错误与异常 笔记与总结（14 ）记录和发送异常信息

    当发生异常时,把异常信息记录到日志文件中: <?php header('content-type:text/html; charset=utf-8'); class LogException e ...