1. <!DOCTYPE html>
  2. <html>
  3.  
  4. 	<head>
  5. 		<meta charset="UTF-8">
  6. 		<title></title>
  7. 		<style>
  8. 			div {
  9. 				width: 200px;
  10. 				height: 200px;
  11. 				background: orange;
  12. 				display:none;
  13. 			}
  14. 		</style>
  15. 		<script src="jquery-2.2.4.min.js"></script>
  16. 		<script>
  17. 			$(document).ready(function() {
  18. 					$('#bt1').on('click', function() {
  19. 						$('p').toggle(1000);
  20. 					})
  21. 					$('#bt_fade_in').on('click',function(){
  22. 						$('#div_fade_in').fadeIn(1000);
  23. 					});
  24. 					$('#bt_fade_out').on('click',function(){
  25. 						$('#div_fade_in').fadeOut(1000);
  26. 					});
  27. 					$('#bt_fade_to').on('click',function(){
  28. 						$('#div_fade_in').fadeTo(1000,.5);
  29. 					});
  30. 			});
  31. 		</script>
  32. 	</head>
  33.  
  34. 	<body>
  35. 		<p>被隐藏对象</p>
  36. 		<button id="bt1">隐藏</button>
  37. 		<button id="bt_fade_in">fadeIn</button>
  38. 		<button id="bt_fade_out">fadeOut</button>
  39. 		<button id="bt_fade_to">fadeTo设置透明度</button>
  40. 		<br/>
  41. 		<div id="div_fade_in">FadeIn</div>
  42. 	</body>
  43.  
  44. </html>

　//除此之外还有slideDown, slideup, 每个动画都有一个执行完毕后的回调函数

jQuery 常用动画的更多相关文章

  1. jquery-12 jquery常用动画效果有哪些

    jquery-12 jquery常用动画效果有哪些 一.总结 一句话总结:jquery可以用户animate()自定义动画,也可以slide和fade系列方法来设置动画. 1.动画效果如何设置执行时间 ...

  2. JQuery常用动画实现函数

    1.上拉.下拉和切换 slideup().slidedown().slideToggle() JQuery里面的切换太吊了,它自带判断当前显示状态,如果为显示就执行隐藏,如果为隐藏就执行显示. 2.淡 ...

  3. jQuery的动画处理总结

    最近一年多一直在做前端的东西,由于老板在追求一些年轻动感的效果,让页面元素不能仅仅是简单的隐藏显示,所以经常会使用一些动画效果,发现jQuery的动画真心好用啊,把常用的几个总结一下,希望不再每次使用 ...

  4. JQuery常用实用的事件[较容易忽略的方法]

     JQuery常用实用的事件 注:由于JQuery片段较多就没有用插入代码文本插入,请见谅!JQuery 事件处理ready(fn)代码: $(document).ready(function(){ ...

  5. jquery常用函数与方法汇总

    1.delay(duration,[queueName]) 设置一个延时来推迟执行队列中之后的项目. jQuery1.4新增.用于将队列中的函数延时执行.他既可以推迟动画队列的执行,也可以用于自定义队 ...

  6. JQuery常用API 核心 效果 JQueryHTML 遍历 Event事件

    JQuery 常用API 参考资料:JQuery 官网   jQuery API 中文文档 核心 jQuery 对象 jQuery() 返回匹配的元素集合,无论是通过在DOM的基础上传递的参数还是创建 ...

  7. 10个非常炫酷的jQuery相册动画赏析

    我们经常可以在网页上看到形式各异的jQuery相册插件,由于现在浏览器对HTML5和CSS3的兼容越来越好了,所以很多jQuery相册插件都运用了CSS3的相关特性,形成了许多炫酷的动画特效.本文收集 ...

  8. 05-老马jQuery教程-动画

    前言 jQuery的动画系统做的非常出色,而且把最常用的显示.隐藏.淡入淡出.滑动显示和折叠凳效果都做了很好的封装.跟jQuery的选择器和事件配合起来,可以实现很多很绚的效果,而且简单易用兼容性好. ...

  9. 关于jquery所有动画都有速度和动画的方向(在宽度方向上的动画)?

    不只是jquery的 animate 动画, 才有时间的 参数, 实际上, 在所有的动画中, 包括: show/hide/toggle, slideup/slidedown/slidetoggle, ...

随机推荐

  1. unity入门笔记

    我于2010年4月1日硕士毕业加入完美时空, 至今5年整.刚刚从一家公司的微端(就是端游技术+页游思想, 具体点就是c++开发, directX渲染, 资源采取所需才会下载)项目的前端主程职位离职, ...

  2. UIStepper

    @在IOS5中增加了一个UIStepper的新控件,UIStepper可以连续增加或减少一个数值.控件的外观是两个水平并排的按钮构成,一个显示为“+”,一个显示为“-”. 1. 初始化控件 UISte ...

  3. h5新增标签兼容性

    <address> 标签定义文档或文章的作者/拥有者的联系信息.  兼容所有浏览器 <area> 标签定义图像映射中的区域(注:图像映射指得是带有可点击区域的图像).兼容所有浏 ...

  4. js,jquery判断某一节点是否存在

    前两天工作时遇到一问题,就是模块A显示时,B是一种样式,模块A删除,B是另一种样式.记录下判断节点存在的方法. 先写下html <!doctype html> <html> & ...

  5. 企业用户选择Java多于.NET的 5个原因

    .NET 和 Java 是当今社会最受欢迎的两种编程语言, 长期的发展和强大的功能使他们足以在编程界立足. 十余年的争论也没得到结果的一个话题就是——他们哪个更好一些? 今天, 我们不再去讨论JAVA ...

  6. 通过chrome 获取网站的cookie信息

    通过chrome 打开网页 审核元素 登录网站后 network列表中查看 home?开头列表项的 cookie信息

  7. java.lang.ClassNotFoundException: org.apache.http.util.Args

    java.lang.ClassNotFoundException: org.apache.http.util.Args at org.apache.catalina.loader.WebappClas ...

  8. 读书笔记3 Socket

    Socket被称为网络插座.用于两个网络应用程序之间的通信. 通信地址:URI 通过协议,地址,端口号可以确定网络上的一个程序.地址和端口号组合称之为端点. 通常会有发信人通信地址,收信人通信地址这两 ...

  9. MySql与SqlServer的一些常用用法的差别

    MySql与SqlServer的一些常用用法的差别 本文为转载 本文将主要列出MySql与SqlServer不同的地方,且以常用的存储过程的相关内容为主. 1. 标识符限定符 SqlServer [] ...

  10. Linux sed命令实例详解

    简介 sed 是一种在线编辑器,它一次处理一行内容.处理时,把当前处理的行存储在临时缓冲区中,称为“模式空间”(pattern space),接着用sed命令处理缓冲区中的内容,处理完成后,把缓冲区的 ...