<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title></title>

        <script src="js/jquery.js"></script>

    </head>

<style>

body{font-family: "微软雅黑";width: 980px; margin: 0 auto; text-align: center;}

    .box{

        width: 300px;

        height: 300px;

        background: green;

        border: 1px solid #e6e6e6;

        margintop: 50px;

        line-height: 200px;

        position: absolute;

    }

button{

    border: none;

    background: green;

    width: 100px;

    height: 50px;

    line-height: 50px;

    color: #fff;

    font-size: 16px;

    margin-top: 50px;

    }

</style>

    <body>

        <button>点击开始动画</button>

        <div class="box" ></div>

        <script>

            $(document).ready(function(){

              $("button").click(function(){

                var div=$(".box");

                div.animate({height:'200px',opacity:'0.4'},"slow");

                div.animate({width:'200px',opacity:'0.8'},"slow");

                div.animate({height:'100px',opacity:'0.4'},"slow");

                div.animate({width:'100px',opacity:'0.8'},"slow");

                div.animate({right:'100px',opacity:'0.8'},"slow");

                div.animate({bottom:'100px',opacity:'0.8'},"slow");

                div.animate({left:'100px',opacity:'0.8'},"slow");

                div.animate({top:'100px',opacity:'0.8'},"slow");

              });

            });

        </script> 

        <script>

            $(document).ready(function(){

                $("button").click(function(){

                    var div=$(".box");

                        div.animate({height:'300px',opacity:'0.4'},"slow");

                        div.animate({width:'300px',opacity:'0.8'},"slow");

                        div.animate({height:'100px',opacity:'0.4'},"slow");

                        div.animate({width:'100px',opacity:'0.8'},"slow");

                    });

                });

            });

        </script>

    </body>

</html>

.animate  事件，是这个 里面的新的东西。解释起来就是  使div 块儿  变得有灵魂 可以移动。

Tips：

1、click 事件的  点击节点的选择

2、通过 var div=$(".box")  来选择需要控制的 css 属性

剩下的就要靠 自己去敲代码，看效果 去理解其中的 意思。

昨天的这个先补上--这个是关于 JQ 的移动 和 渐变特效的点击事件的更多相关文章

  1. Twitter面试题蓄水池蓄水量算法(原创 JS版，以后可能会补上C#的)

    之前在群里有人讨论Twitter的面试题,蓄水池蓄水量计算,于是自己写了个JS版的(PS:主要后台代码还要编译,想想还是JS快,于是就使用了JS了.不过算法主要还是思路嘛,而且JS应该都没问题吧^_^ ...

  2. 如何在UILable上添加点击事件？

    最近开始学习iOS开发,今天上来写第一个iOS笔记 昨天碰到一个需求,在UILable上添加点击事件,网上找了写资料,有人建议用透明的UIButton覆盖,有人建议写一个集成自UILable的类,扩展 ...

  3. asp.net 页面上的点击事件

    asp.net 页面上 服务器端控件Button 有两个click事件如 <asp:Button ID="Button1" runat="server" ...

  4. view上添加点手势 button无法响应点击事件

    在view 上添加手势 有的时候  会把Button的 点击事件盖掉,这个 时候 我们用UITapGestureRecognizer的代理方法 //手势的代理方法 - (BOOL)gestureRec ...

  5. Javascript(jQuery)中绑定页面上所有按钮点击事件的几种方式

    方法一:使用document对象查找所有的按钮 [javascript] view plain copy 在CODE上查看代码片派生到我的代码片 //按照dom的方式添加事件处理 function B ...

  6. echarts 取消图例上的点击事件和图表上鼠标滑过点击事件

    备注:标黄的代码是起作用的代码,其他的不需要借鉴!!! //取消 鼠标滑过的提示框 tooltip : {         trigger: 'item',      show:false,      ...

  7. a标签上的点击事件

    当我们在处理a标签上的点击事件时发现即使href=""里面为空,点击事件的效果也不明显,这种情况该如何处理呢?常见的处理方法有以下几种: 1.a href="javasc ...

  8. 关于iphone手机上点击事件不起作用

    今天调试手机端H5页面的时候,发现一个很坑的问题,绑定的点击事件不起效果,安卓上都没问题,事件能正确触发,但是在iPhone没反应. 开始觉得是写法问题,后来发现,是由于iPhone上,点击的对象,必 ...

  9. openlayers上添加点击事件

    有很多场景会有这个需求,就是我绘制了图标,点击图标需要展示一些对应的信息 openlayer的事件主要是通过监听来完成的,你所有的icon的点击事件都是可以通过监听map的点击事件来处理对应的逻辑的 ...

随机推荐

  1. js base64位和c# Base64位转换

    <script> /* 编码规则 Base64编码的思想是是采用64个基本的ASCII码字符对数据进行重新编码. 它将需要编码的数据拆分成字节数组. 以3个字节为一组.按顺序排列24 位数 ...

  2. 主机和虚拟机能相互ping通但是不能复制

    1.本机能ping通虚拟机 2.虚拟机也能ping通本机 3.虚拟机能访问自己的web 4.本机无法访问虚拟己的web 后来发现是防火墙将80端口屏蔽了的缘故. 检查是不是服务器的80端口被防火墙堵了 ...

  3. UOJ261 【NOIP2016】天天爱跑步

    本文版权归ljh2000和博客园共有,欢迎转载,但须保留此声明,并给出原文链接,谢谢合作. 本文作者:ljh2000作者博客:http://www.cnblogs.com/ljh2000-jump/转 ...

  4. 关于当一个C#工程移植到另一台机子上（win7）上时，程序报错。dll没有被指定在Windows上运行，或者它包含错误。请尝试使用原始安装媒体重新安装程序。。。。。。

    , 解决方法:通过从网上重新下载dll文件 拷贝到报错的目录下,替换掉原有的dll,可以正确运行.

  5. C#的参数修饰符out，params,ref

    using System; namespace ParamsProgram { class TestParams { public static void Main(string[] args)//s ...

  6. Android中运行的错误:java.lang.UnsatisfiedLinkError: Couldn't load locSDK3: findLibrary returned null.

    ---恢复内容开始--- 明明已经加入了liblocSDK3.so,但总是无法定位.提示错误java.lang.UnsatisfiedLinkError: Couldn't load locSDK3: ...

  7. AngularJs ngClass、ngClassEven、ngClassOdd、ngStyle

    这几个都关于样式及类名修改的,所以先把样式代码贴上吧. .red{color:red} .blue{color:blue} 写案例用到的样式就这么简单的两个,下面进入正题. ngClass ngCla ...

  8. POJ - 1511 Invitation Cards（Dijkstra变形题）

    题意: 给定一个有向图,求从源点到其他各点的往返最短路径和.且这个图有一个性质:任何一个环都会经过源点. 图中的节点个数范围:0-100w; 分析: 我们先可以利用Dijkstra算法求解从源点到其余 ...

  9. Raspberry Pi 3 Basic Command and Information

    default username : pi default password : raspberry enter system setting interface : sudo raspi-confi ...

  10. shell text process code

     shell 命令处理文本: 1. 批量处理该目录下的文件,ls | while read l ; do echo $l ; done > b.txt 2. 批量处理文件的每一行 , cut - ...