<!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. 【翻译+整理】.NET Core的介绍

    .NET Core 是一个通用开发平台,它由微软和开源社区共同管理(git hub的.NET开源社区): 他支持Windows,macOS和Linux,并且可以运行在硬件设备中.云平台上和物联网嵌入式 ...

  2. es6笔记1^_^let、string、number、math

    ECMAScript是一种由Ecma国际(前身为欧洲计算机制造商协会,英文名称是European Computer Manufacturers Association)通过ECMA-262标准化的脚本 ...

  3. 快速排序Java版

    package Quick; public class quicksort { static class QuickSort { public int data[]; private int part ...

  4. [ios2]警告：Block的Retain Cycle的解决方法 【转】

    <span style="background-color: rgb(248, 248, 248); font-family: 'PT Sans', Geogia, Baskervil ...

  5. HTML5 智能表单

    HTML5 智能表单 1.表单新增属性  ☀ autofocus 属性 <input type="text" autofocus/>设置 autofocus 属性,使文 ...

  6. python中函数与函数之间的调用，总是晕菜，整理如下，有不对或者补充的请提出来~

    1.python函数基础 函数名: fun 函数体:1~3行 返回值:2 调用函数:fun() ,只有见到这个括号(),程序会根据函数名从内存中找到函数体,然后执行它. 2.函数的执行顺序 下面的fu ...

  7. 【锋利的Jquery】读书笔记十一

    项目进度太赶,天天公司加班12小时,没时间看书充电.2016年再更新一篇吧.现在凌晨2点36分. 2017加油哦 jquery合适的选择器 $("#id") 无疑是最佳提高性能的方 ...

  8. [SQL基础教程] 4-2 数据删除(DELETE)

    [SQL基础教程] C4 数据更新 4-2 数据删除(DELETE) DROP TABLE / DELETE DROP TABLE - 完全删除表 DELETE - 仅删除数据,保留表容器 DELET ...

  9. Ubuntu 14.04 登陆界面循环问题解决

    今天手贱startx然后虚拟机就卡死了,再开输过密码就无限跳到登陆界面,其他账户可用.怀疑/home未挂载. 解决方法:(alf改成你的用户名) $ cd ~$ sudo chown alf:alf. ...

  10. 【angular】angular实现简单的tab切换

    html: <div class="list-group" ng-repeat="tab in menuList"> <a href=&quo ...