<!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. [日常训练]article

    Description 小今天来写作文啦! 小非常善于堆砌辞藻.在洋洋洒洒写了一长篇之后,小发现作文中很多段落都似曾相识.小认为,如果一段字符在文章开头,结尾和中间都出现过,那么这段字符就可以被认为是 ...

  2. css-文字和图片在容器内垂直居中实测。方法来源张鑫旭博客。

    方法一:在文字或者图片后加入一个width为0的inline-block元素,将文字inline-block后vertical-align:middle.图片同理 多行文字居中:(有些浏览器会出问题, ...

  3. 【bzoj1034】 ZJOI2008—泡泡堂BNB

    http://www.lydsy.com/JudgeOnline/problem.php?id=1034 (题目链接) 题意 田忌赛马.. Solution 贪心. 1.若A队最弱的比B队最弱的强,先 ...

  4. Groupby - collection processing

    Groupby - collection processing Iterator and Iterable have most of the most useful methods when deal ...

  5. requst方法简单用一下

    使用getParametar() 获取表单提交过来的文本框的值 setAttribute(String name, Object o)存储此请求中的属性.在请求之间重置属性.此方法常常与 Reques ...

  6. android service 本地 远程 总结

    android编写Service入门 android SDK提供了Service,用于类似*nix守护进程或者windows的服务. Service有两种类型: 本地服务(Local Service) ...

  7. CentOS 6 日期 时间，时区，设置修改及时间同步

    一.时区 显示时区 date --help 获取帮助 date -R date +%z 上面两个命令都可 [root@localhost ~]# date -R; date +%z Fri, 19 O ...

  8. #第一用Markdown编辑器#

    Markdown初次使用 This is a simple Markdown editor based on 'Markdown' it's * italic * style. it's also _ ...

  9. Nginx系列2之Nginx+php

    preface 公司所有的大多数业务都泡在LNMP平台上,所以对PHP+Nginx有点了解,那么就做个小小的总结吧. what's FastCGi FastCGI是一个可伸缩,高速的在HTTP ser ...

  10. Linux学习之CentOS--CentOS6.下Mysql数据库的安装与配置

    跟着配置,顺利配置完成 http://www.cnblogs.com/xiaoluo501395377/archive/2013/04/07/3003278.html