<!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. 高反差保留滤镜学习OpenCV：滤镜系列（11）——高反差保留

    这几周笔者几篇文章介绍了改高反差保留滤镜的文章. 关联文章的地址 高反差保留就是高通滤波 r=(pix[x,y]-avg(R))/128 pix[x,y]*r+128*(1-r) #include & ...

  2. python并发获取snmp信息及性能测试

    python & snmp 用python获取snmp信息有多个现成的库可以使用,其中比较常用的是netsnmp和pysnmp两个库.网上有较多的关于两个库的例子. 本文重点在于如何并发的获取 ...

  3. Libevent核心原理

    Libevent 是一个事件驱动框架, 不能仅说他是一个网络库. notejs就是采用与libevent类似的libev来做核心驱动的.   Libevent支持三种事件:io事件.信号事件.时间事件 ...

  4. html5新标签布局应用指南

    html5中为了便于设计者的网站布局新添加了一些标签,本文主要讲解这些标签的实际应用方法. 大多数前端的朋友在设计网站时主要应用<div>标签构造盒子进行布局,这是种非常高效的方法,可以将 ...

  5. 程序员快围观！2016年最受欢迎中国开源软件TOP 20

    [PConline 资讯]开源软件对程序员来说是一个经常接触的软件,作为一个经常接触的软件,当然想知道自己用的软件受欢迎程度,基于此,开源中国在近日公布"2016年度最受欢迎中国开源软件评选 ...

  6. java基础练习 4

    import java.util.Scanner; public class Forth { public static void main(String[] args){ /*请输入星期几的第一个字 ...

  7. 第一百三十五节，JavaScript，封装库--拖拽

    JavaScript,封装库--拖拽 封装库新增1个拖拽方法 /** tuo_zhuai()方法,将一个弹窗元素实现拖拽功能 * 注意:一般需要在css文件将元素里的某一个区块光标设置成提示可以拖拽, ...

  8. 读书笔记之《The Art of Readable Code》

    <The Art of Readable Code>- Dustin Boswell, Trevor Foucher    O'Reilly出版 整体认知:这本书写得很好,每一章后面的总结 ...

  9. 记JavaScript的入门学习（一）

    2016年11月20日算是每天都会利用点时间去思考,去学习,接下来便是我学习JavaScript的前前后后,希望早日学完JavaScript和jQuery 之前学校毕业设计选择了一个如下图的题目 希望 ...

  10. ios在项目中打开word文档、ppt等总结

    最近在项目开发中遇到下载附件文档预览需求,在这里总结一下我的实现方法,本文最后会附带我写的demo下载地址 这里我总结了三种实现方法(1)用webView预览(2)通过UIDocumentIntera ...