<!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. vue中的provide/inject的学习

    在 Vue.js 的 2.2.0+ 版本中添加加了 provide 和 inject 选项.用于父级组件向下传递数据.provide/inject:简单的来说就是在父组件(或者曾祖父组件)中通过pro ...

  2. use of objects can be less efficient than a procedural approach

    PHP Advanced and Object-Oriented Programming 3rd Edition As for the technical negatives of OOP, use ...

  3. [dpdk] dpdk --lcores参数

    dpdk程序的命令行参数 --lcores可以设置lcore到CPU processer的多对多映射关系. 这样既可以提供CPU processor的伸缩扩展,同时也保证了EAL thread的运行环 ...

  4. 预备作业3：Linux安装及命令入门

    linux系统的安装 1.虚拟机: 首先是VirtualBox5.2.7的安装,这个按照老师给的基于VirtualBox安装Ubuntu图文教程一步步来很快就能安好,也没有遇到无法选择64-bit的问 ...

  5. jvm的调优

    首先我们要知道jvm的调优,主要是对那些部分的优化.通过jvm内存模型我们可以,首先是分析遇到的问题,然后通过一些工具或者手段找到问题所在,然后通过一定的措施解决问题,下面我们也将按着这个思路来给出具 ...

  6. js：return [ expression ]，return false，return true，return的区别

    1.return [ expression ] return返回值实际上是对window.event.returnvalue进行设置. 2.return false,阻止默认的行为, ① 当给a标签绑 ...

  7. finecms设置伪静态后分享到微信不能访问怎么处理

    finecms设置伪静态后分享到微信不能访问,分享的链接自动增加了一串参数,类似这样的***.html?from=singlemessage&isappinstalled=0,刚开始ytkah ...

  8. dedecms站内搜索页面调用最新文章

    在页面中调用最新文章列表可以使新发布的文章更快被收录,如何在dedecms站内搜索页面调用最新文章呢? 1.登陆系统后台,进入“模板——模板管理——自定义宏标记”,点击“智能标记向导”进入智能标记生成 ...

  9. 007-atomic包的原理及分析

    一.Atomic简介 Atomic包是java.util.concurrent下的另一个专门为线程安全设计的Java包,包含多个原子操作类.这个包里面提供了一组原子变量类.其基本的特性就是在多线程环境 ...

  10. map+case结构使用技巧

    people.txt文本如下 lyzx1, lyzx2, lyzx3, lyzx4, lyzx5, lyzx6, lyzx7, lyzx7,,哈哈 托塔天王 import org.apache.spa ...