<!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. centos6.5(64bit),python2.6.6安装MySQLdb模块

    1.下载MySQL-python.setuptools安装包 2.tar zxvf setuptools-0.6c11.tar.gz 3.cd setuptools-0.6c11 4.python s ...

  2. mysql帮助命令

    HELP contents 查看MySQL命令的使用. eg: HELP 'Data Type' 查看所有的数据类型的使用方法.

  3. 《mongoDB》概念-数据类型

    一:概念 - mongoDB 是一个面向文档的数据库,而不是关系型数据库. - 摘自<mongoDB 权威指南 第2版>第3页 二:数据类型 - null - 用于表示空值或者不存在的字段 ...

  4. StringDemo

    package cn.sasa.demo2; public class StringDemo { public static void main(String[] args) { //String 底 ...

  5. 让对象支持with语句

    一.with语句的好处 with语句的好处在于,它可以自动帮我们释放上下文,就比如文件句柄的操作, 如果你不使用with语句操作,你要先open一个文件句柄,使用完毕后要close这个文件句柄, 而使 ...

  6. LVS：三种负载均衡方式比较

    [转自http://soft.chinabyte.com/25/13169025.shtml] 1.什么是LVS? 首先简单介绍一下LVS (Linux Virtual Server)到底是什么东西, ...

  7. 新辰：共享是SEO的思维 用户是SEO的核心

    大家都知道.SEO一直没有一个能够定义的核心.新辰知道全部的东西里面在互联网领域链接是非常重要的.所以新辰觉得做SEO就是把链接做好.因此,链接对于一个站点来说简单分能够分成两种.内部的链接和外部的链 ...

  8. Android支持全面屏设置

    在AndroidManifest的application里面设置resizeableActivity的属性为true <application android:name=".Compl ...

  9. MySQL中any、some、all关键字

    MySQL中any.some.all关键字http://blog.csdn.net/imzoer/article/details/8266324 ANY关键字: 假设any内部的查询语句返回的结果个数 ...

  10. shell进阶函数

    函数的定义和用途 函数function是由若干条shell命令组成的语句块,实现shell代码的重用和模块化编程. 函数和shell程序的异同点 它与shell程序形式上是相似的,不同的是它不是一个单 ...