<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<title></title>

		<style>

			div {

				width: 200px;

				height: 200px;

				background: orange;

				display:none;

			}

		</style>

		<script src="jquery-2.2.4.min.js"></script>

		<script>

			$(document).ready(function() {

					$('#bt1').on('click', function() {

						$('p').toggle(1000);

					})

					$('#bt_fade_in').on('click',function(){

						$('#div_fade_in').fadeIn(1000);

					});

					$('#bt_fade_out').on('click',function(){

						$('#div_fade_in').fadeOut(1000);

					});

					$('#bt_fade_to').on('click',function(){

						$('#div_fade_in').fadeTo(1000,.5);

					});

			});

		</script>

	</head>

	<body>

		<p>被隐藏对象</p>

		<button id="bt1">隐藏</button>

		<button id="bt_fade_in">fadeIn</button>

		<button id="bt_fade_out">fadeOut</button>

		<button id="bt_fade_to">fadeTo设置透明度</button>

		<br/>

		<div id="div_fade_in">FadeIn</div>

	</body>

</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. 【MRPT】【icp-slam-live】Vs2013+ cmake3.6.1 + mrpt1.4.0+opencv2.9.4+wxWidget3.0.2环境配置

    Win10下Vs2013 + cmake3.6.1 + mrpt1.4.0+opencv2.9.4+wxWidget3.1.0环境配置 所接触过的最令我崩溃的环境配置.之前没有考虑到vs2013 20 ...

  2. 添加无线服务wzcsvc服务，Eventlog服务

    <添加eventlog服务.reg> Windows Registry Editor Version 5.00 [HKEY_LOCAL_MACHINE\SYSTEM\CurrentCont ...

  3. 如何理解和熟练使用JS 中的call apply

    有时候看一两个关于apply或call的小例子,感觉能够理解一点点但是下次碰到又要纠结半天才能转过弯来-而且不知道怎么应用到实际工作当中去- call 和 apply 都是为了改变某个函数运行时的 c ...

  4. Flask中mongodb实现flask_login保持登录

    最近在学习Flask,使用flask-login时,一直无法完成保持登录的状态,网上的例子都是使用SQLAlchemy,但是我用的是mongodb. 网上的例子使用SQLAlchemy时,定义User ...

  5. 初学java之触发响应事件

    import java.awt.*; import javax.swing.*; import java.awt.event.*; class WindowActionEvent extends JF ...

  6. C++格式化输入输出

    要实现格式化输入输出,程序需要包含 iostreams 标准标头 <iomanip> 以定义几个各自采用单个参数的操控器. 备注: 其中每个操控器都返回重载 basic_istream&l ...

  7. tab切换-自动、点击、内容变换

    <div class="tab">                    <ul class="pics">               ...

  8. uva 10723

      10723 - Cyborg Genes Time limit: 3.000 seconds Problem F Cyborg Genes Time Limit 1 Second Septembe ...

  9. OpenTSDB介绍——基于Hbase的分布式的，可伸缩的时间序列数据库，而Hbase本质是列存储

    原文链接:http://www.jianshu.com/p/0bafd0168647 OpenTSDB介绍 1.1.OpenTSDB是什么?主要用途是什么? 官方文档这样描述:OpenTSDB is ...

  10. web开发常用的js验证,利用正则表达式验证邮箱、手机、身份证等输入

    正则表达式验证 //邮箱 \-])+\.)+([a-zA-Z0-]{,})+$/; email = document.getElementById("email").value; ...