<!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. webapp开发经验总结

    webapp开发的大趋势之下,本人收集整理了一写关于webapp开发的经验,欢迎大家补充指正. 关于link <link rel="apple-touch-startup-image& ...

  2. ios batchRequest

    https://github.com/facebook/pop AF 为什么要用 一个线程去进行  1.这有什么好处  因为其生产额外的线程也要 开销的   asi 和af都是这么去做的  2.本身所 ...

  3. centos 下如何加入sudo 用户

    当在终端执行sudo命令时,系统提示“ jackluo is not in the sudoers file”: $ sudo ls Password:jackluo is not in the su ...

  4. c#操作excel后关闭excel.exe的方法

    关闭进程 C#和Asp.net下excel进程一被打开,有时就无法关闭,   尤其是website.对关闭该进程有过GC.release等方法,但这些方法并不是在所有情况下均适用.  于是提出了kil ...

  5. Qt make clickable label 制作可点击的Label控件

    Qt中的Label标签控件的作用绝不仅仅限于显示静态文本,其实它的功能很强大,由于其有setPixmap()成员函数,故而可以当显示图片窗口使用,而且还可以实时显示摄像头捕获的图片,然后它对鼠标事件的 ...

  6. hdu acm steps Big Event in HDU

    上网搜了一下这道题的解法,主要有两个方法,一种是采用母函数的方法,一种是采用0/1背包的方法. 先说一下母函数,即生成函数,做个比喻,母函数就是一个多项式前面的系数的一个整体的集合,而子函数就是这个多 ...

  7. Cdn加速

    http://www.bootcdn.cn/ http://cdn.code.baidu.com/ backbone <script src="https://cdn.bootcss. ...

  8. Excel 2003 中如何用VBA 代码访问单元格里的值及操作单元格 - 唐诗宋词的专栏 - 博客频道 - CSDN.NET

    在Excel 中编写VBA 代码,最常做的事可能就是操作表单中单元格里的数据. 我这里总结一下如何从VBA 代码中操作单元格的数据. 在VBA 代码中操作单元格需要用到Range 对象,Range 是 ...

  9. Lamda表达式

    Lamda表达式 函数式编程的产生(匿名内部类) interface Mes{ public void speak(); } public class Lam { public static void ...

  10. Apache Spark源码走读之19 -- standalone cluster模式下资源的申请与释放

    欢迎转载,转载请注明出处,徽沪一郎. 概要 本文主要讲述在standalone cluster部署模式下,Spark Application在整个运行期间,资源(主要是cpu core和内存)的申请与 ...