<!DOCTYPE html>

<html>

 <head>

  <title> new document </title>

  <meta charset="utf-8">

    <style>

        img{position:absolute}

    </style>

 </head>

 <body>

    <h1>练习：jQuery万能动画函数</h1>

    <img src="img/1.jpg">

    <img src="img/2.jpg">

    <img src="img/3.jpg">

    <img src="img/4.jpg">

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

    <script>

        //找到所有img中第1个设置其left为0

        //找到所有img中第2个设置其left为200px

        //找到所有img中第3个设置其left为400px

        //找到所有img中第4个设置其left为600px

        $("img").each(function(i){

            $(this).css("left",i*200)

        }).click(function(){//为所有img绑定单击事件

            //对当前img启动动画:

            //width->400,height->300,opacity->0

            //2s

            //线性

            //动画结束: 移除当前img

            $(this).animate(

                {width:400,height:300,opacity:0},

                2000,

                "linear",

                function(){//this->当前正在执行操作的对象

                    $(this).remove();

                }

            );

        });

    </script>

 </body>

</html>

jQuery-动画点击淡化消失的更多相关文章

  1. 7款经典炫酷的HTML5/jQuery动画应用示例及源码

    jQuery是一款普遍受前端开发者欢迎的Javascript框架,但是开发者貌似更关注jQuery开发的插件,海量的jQuery插件让前端开发者非常方便.HTML5的加入让jQuery这个家族更加丰富 ...

  2. python 全栈开发，Day53(jQuery的介绍,jQuery的选择器,jQuery动画效果)

    js总结 js: 1.ECMAScript5 ES5语法 2.DOM CRUD 获取 3种方式 id tag className //面向对象 对象 : 属性和方法 某个对象中 function $( ...

  3. jQuery操作标签，jQuery事件操作，jQuery动画效果，前端框架

    jQuery操作标签 jQuery代码查找标签绑定的变量名推荐使用 $xxxEle 样式类操作 addClass();// 添加指定的CSS类名. removeClass();// 移除指定的CSS类 ...

  4. jQuery动画特效实例教程

    本文以实例形式详细讲述了jQuery动画特效的实现方法. 1.自制折叠内容块 内容块如下:     <div class="module">   <div cla ...

  5. JQuery动画效果

    jquery动画效果常用方法 1.show()显示效果语法:show(speed,callback)Number/String,Function speend为动画执行时间,单位为毫秒.也可以为slo ...

  6. 三、jQuery--jQuery基础--jQuery基础课程--第7章 jQuery 动画特效

    1.调用show()和hide()方法显示和隐藏元素 show()和hide()方法用于显示或隐藏页面中的元素,它的调用格式分别为:$(selector).hide(speed,[callback]) ...

  7. JQuery 动画及一些小知识点

    JQuery  动画 show(),hide()显示/隐藏slideDown(),slideUp() 拉开/合起fadeIn(),fadeOut()渐出/渐入自定义动画 animate({left:& ...

  8. css3动画和jquery动画使用中要注意的问题

    前一阵子写demo的时候遇到这样一个问题,就是给元素添加css3或者jquery动画时,在动画结束前不能准确取到元素的css属性. 1. css3动画讨论 先看代码: html: <div id ...

  9. JQuery动画animate的stop方法使用详解

    JQuery动画animate的stop方法使用详解 animate语法: 复制代码 代码如下: $(selector).animate(styles,speed,easing,callback) 复 ...

随机推荐

  1. hive优化之并行执行任务

    1.与Oracle并行技术一样,hive在执行mapreduce作业时也可以执行并行查询.针对于不同业务场景SQL语句的执行情况,有些场景下SQL的执行是需要分割成几段去执行的,而且期间并不全是存在依 ...

  2. 查看ElasticSearch服务状态和结果的URL

    1,查看es集群状态 http://ip:port/_cat/health?v 2,集群节点健康查看 http://ip:port/_cat/nodes?v 3,列出集群索引 http://ip:po ...

  3. JAVA常用的异常处理情况

    从编程到现在,遇见过很多次程序崩的情况,好多时候都不知道怎么去解决才好,一般性解决就是百度或者问别人,但是每一次百度解决的下一次还是会遇见同样的问题,也没有系统的整理梳理过相关的处理异常的知识,再一次 ...

  4. js正则表达式：学习网址和部分正则验证

    https://www.cnblogs.com/chenmeng0818/p/6370819.html ① 不以0开头的多个数字,但可以是单个0,必须为数字,位数不允许超过10个. var reg=/ ...

  5. python基础数据类型考试题

    Python基础数据类型考试题 考试时间:两个半小时                      满分100分(80分以上包含80分及格) 一,基础题. 1,简述变量命名规范(3分) 2,字节和位的关系 ...

  6. webpack导入css及各项loader

    1. webpack导入css 1) 下载相关的加载器 npm install style-loader css-loader -D 2)将index.css引入到mian.js中 import '. ...

  7. 【WebDriver】WebDriver 常用操作

    WebDriver 常用操作 1 浏览器操作 2 窗口和弹框操作 3 cookies 操作 4 简单对象的定位 5 页面元素操作 6 鼠标事件 7 键盘事件 1 浏览器操作 #属性: driver.c ...

  8. 【Loadrunner】Loadrunner 手动关联技术

    Loadrunner 手动关联技术 录制成功,回放失败,怀疑和动态数据有关: 1 重新录制一份脚本,两次录制的脚本进行比对,确定动态数据,复制动态数据: 2  找到第一次产生该动态数据的响应对应的相应 ...

  9. 如何将finecms链接URL中的list和show去掉

    finecms上手还算比较快吧,对seo关注的朋友会想着将它的url改造了,里面多了-list-和-show-,可以直接去掉,下面就随着ytkah一起来进行设置吧. 首先到后台的url规则,将列表和列 ...

  10. UE4程序及资源加密保护方案

    UnrealEngine4外壳加密 . Virbox Protector 解决代码反汇编和反dump代码,解决软件盗版与算法抄袭. 虚幻引擎4是由游戏开发者为开发游戏而制作的.完整的游戏开发工具套件. ...