jQuery-动画点击淡化消失

<!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>

转载于:https://www.cnblogs.com/longly/p/6396070.html

jQuery-动画点击淡化消失相关推荐

恢复html的初始选定状态,jQuery实现点击旋转，再点击恢复初始状态动画效果示例...
本文实例讲述了jQuery实现点击旋转,再点击恢复初始状态动画效果.分享给大家供大家参考,具体如下: 今天遇到要做一个点击 + 然后开始旋转动画后变成 x 具体实现如下 1.HTML 2.CSS ...
Java程序员从笨鸟到菜鸟之（九十一）跟我学jquery（七）jquery动画大体验
本文来自:曹胜欢博客专栏.转载请注明出处:http://blog.csdn.net/csh624366188 最近一直感觉自己好忙,每天都浑浑噩噩的过着,转眼间,好像有好长时间没有更新笨鸟到菜鸟了.现 ...
从零开始学习jQuery (七) jQuery动画-让页面动起来!
本系列文章导航从零开始学习jQuery (一) 开天辟地入门篇从零开始学习jQuery (二) 万能的选择器从零开始学习jQuery (三) 管理jQuery包装集从零开始学习jQuery ( ...
jQuery框架学习第七天：jQuery动画–jQuery让页面动起来!
jQuery框架学习第一天:开始认识jQuery jQuery框架学习第二天:jQuery中万能的选择器 jQuery框架学习第三天:如何管理jQuery包装集 jQuery框架学习第四天:使用jQu ...
Educoder/头歌JAVA——jQuery动画
目录第一关:jQuery动画效果--隐藏/显示相关知识 show()和hide() toggle() 编程要求第2关:jQuery动画效果--淡入淡出相关知识 fadeIn(),fadeOut ...
jQuery动画与效果
jQuery动画与效果 1 显示与隐藏元素 1.1 显示元素 1.2 隐藏元素 1.3 交替显示元素 2 滑动效果 2.1 向上收缩效果 2.2 向下展开效果 2.3 交替伸缩元素 3 淡入淡出效果 ...
详解JQuery动画
我这是我在逆战班学习js的第六周,今天让我来给大家解释一下jQuery框架中的jQuery动画的应用及方式 jQuery动画可以分为内置动画和自定义动画,下面让我们用代码来说明它的用法一.jQuer ...
Educoder jQuery动画
第1关:jQuery动画效果--隐藏/显示点击隐藏按钮,橙色小框消失,速度为slow,完成后弹出我隐藏了: 点击显示按钮,橙色小框显示,速度为"1s,完成后弹出我显示了: 点击toggle ...
java中jquery怎么学,jQuery动画+实例
1.动画基础隐藏和显示 jQuery中隐藏元素的hide方法让页面上的元素不可见,一般可以通过设置css的display为none属性.但是通过css直接修改是静态的布局,如果在代码执行的时候,一般 ...

jQuery-动画点击淡化消失

jQuery-动画点击淡化消失相关推荐

最新文章

热门文章