<!DOCTYPE html>

 <html>

     <head>

         <meta charset="utf-8" />

         <title></title>

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

         <script>

             $(function(){

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

                     if($(this).hasClass("aa")){

                         $(this)

                         .animate({left:-10})

                         .animate({top:-10})

                         .animate({left:10})

                         .animate({top:-10})

                         .animate({left:-10})

                         .animate({left:-10})

                     }

                     $(this).animate({'left':-20,height:300})

                 });

             })

         </script>

     </head>

     <body>

         <div class="aa" style="width: 100px;height: 100px;background: red;position: absolute;"></div>

     </body>

 </html>

jquery的animate动画的更多相关文章

  1. jQuery中animate动画第二次点击事件没反应

    jQuery中animate动画第二次点击事件没反应 用animate做点击翻页动画时发现第二次点击事件动画没反应,而第一次点击有动画效果,代码如下: 复制代码 代码如下: $(".page ...

  2. jquery的animate({})动画整理

    在网页制作的过程中少不了用到各种动画,形式多种多样,flash,css,js,canvas,等等都能实现,对于其优劣和效果只能说各有千秋. 什么是动画效果,其实网页中的渐变效果就是一种很基础的动画,动 ...

  3. 自定义jQuery的animate动画

    //擦除效果 jQuery.extend(jQuery.easing, { easeOutBack : function(x, t, b, c, d, s) { s = s || 1.3; retur ...

  4. jquery 停止animate动画，并且回复最初状态

    // 热门推荐悬浮效果 $("#recom_con li img").mouseenter(function(){ $(this).stop(true, true); $w = p ...

  5. 用jquery的animate动画函数做的网页效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. jquery 温故而知新 animate动画的一些坑

    注意1,只有hover事件后才能紧跟着第二个回调函数(mouseleave),尽量还是不使用mouseover事件了 注意2,.stop(false,true); 结束动画,在动画队列中删除自己,并且 ...

  7. js实现jquery函数animate动画效果

    <script> function animate(obj, json, interval, sp, fn) { clearInterval(obj.timer); function ge ...

  8. Jquery如何使用动画效果改变背景色

    Jquery如何使用动画效果改变背景色 一.问题引入 jquery的animate动画虽然强大,但是无法使用其进行背景色(background-color)的动画效果变化,因为animate动画效果只 ...

  9. jquery animate 动画效果使用解析

    animate的意思是:使有生气:驱动:使栩栩如生地动作:赋予…以生命作为形容词:有生命的:活的:有生气的:生气勃勃的 先看动画效果:http://keleyi.com/keleyi/phtml/jq ...

随机推荐

  1. gcc与g++的区别与联系

    gcc和g++都是GNU(组织)的编译器. 一.误区详解 误区一:gcc只能编译c代码,g++只能编译c++代码 两者都可以,但是请注意: 1.后缀为.c的文件,   gcc把它当作是C程序,而g++ ...

  2. 【转】经典！python中使用xlrd、xlwt操作excel表格详解

    最近遇到一个情景,就是定期生成并发送服务器使用情况报表,按照不同维度统计,涉及python对excel的操作,上网搜罗了一番,大多大同小异,而且不太能满足需求,不过经过一番对源码的"研究&q ...

  3. Altium Designer 快速修改板子形状为Keep-out layer大小

    Altium Designer 快速修改板子形状为Keep-out layer大小 1,切换到 Keep-out layer层, 2,选择层,快捷键为S+Y: 3,设计>>板子形状> ...

  4. Vmware(vmdk)虚拟机到hyperv(vhd)虚拟机转换

    1.关闭Vmware所有虚拟机 2.合并Vmware磁盘 通常磁盘都分开储存 targetDisk.vmdk 3.转换vmdk到vhd 安装winimage http://www.winimage.c ...

  5. 遍历HashMap的最佳方式

    public static void printMap(Map mp) { Iterator it = mp.entrySet().iterator(); while (it.hasNext()) { ...

  6. openui5的资料比较少

    openui5的资料比较少,稳定优秀的开源框架,国内了解的人了了,都在追AngularJS.ExtJS.React. React比较新,非死不可出品而且裹挟Native的噱头.Mobile Nativ ...

  7. C# 利用ajax实现局部刷新

    C#所有runat="server"的控件都会造成整个界面的刷新,如果想实现局部刷新,可以利用ajax. 需要加入的控件有ScriptManager和UpdatePanel,可以实 ...

  8. ssh中的 Write operations are not allowed in read-only mode (FlushMode.MANUAL): Turn your Session into FlushMode.COMMIT/AUTO or remove 'readOnly' marker from transaction definition.

    这个错误我整理了  半天才发现问题的存在. 尝试了网上的很多办法,但是最后都没有达到效果. 包括这两种: 第一种: web.xml种的配置 <filter> <filter-name ...

  9. php 中数据类型

    总体划分 8 中 1基本类型(标量) 整型 int 整型的三种写法 <?php $n1 = 123; //10进制 $n2 = 0123; //8进制 $n3 = 0x123;//16进制 // ...

  10. tcp异常终止连接

    服务端: #include <sys/socket.h> #include <unistd.h> #include <sys/types.h> #include & ...