jQuery 常用动画
<!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 常用动画的更多相关文章
- jquery-12 jquery常用动画效果有哪些
jquery-12 jquery常用动画效果有哪些 一.总结 一句话总结:jquery可以用户animate()自定义动画,也可以slide和fade系列方法来设置动画. 1.动画效果如何设置执行时间 ...
- JQuery常用动画实现函数
1.上拉.下拉和切换 slideup().slidedown().slideToggle() JQuery里面的切换太吊了,它自带判断当前显示状态,如果为显示就执行隐藏,如果为隐藏就执行显示. 2.淡 ...
- jQuery的动画处理总结
最近一年多一直在做前端的东西,由于老板在追求一些年轻动感的效果,让页面元素不能仅仅是简单的隐藏显示,所以经常会使用一些动画效果,发现jQuery的动画真心好用啊,把常用的几个总结一下,希望不再每次使用 ...
- JQuery常用实用的事件[较容易忽略的方法]
JQuery常用实用的事件 注:由于JQuery片段较多就没有用插入代码文本插入,请见谅!JQuery 事件处理ready(fn)代码: $(document).ready(function(){ ...
- jquery常用函数与方法汇总
1.delay(duration,[queueName]) 设置一个延时来推迟执行队列中之后的项目. jQuery1.4新增.用于将队列中的函数延时执行.他既可以推迟动画队列的执行,也可以用于自定义队 ...
- JQuery常用API 核心 效果 JQueryHTML 遍历 Event事件
JQuery 常用API 参考资料:JQuery 官网 jQuery API 中文文档 核心 jQuery 对象 jQuery() 返回匹配的元素集合,无论是通过在DOM的基础上传递的参数还是创建 ...
- 10个非常炫酷的jQuery相册动画赏析
我们经常可以在网页上看到形式各异的jQuery相册插件,由于现在浏览器对HTML5和CSS3的兼容越来越好了,所以很多jQuery相册插件都运用了CSS3的相关特性,形成了许多炫酷的动画特效.本文收集 ...
- 05-老马jQuery教程-动画
前言 jQuery的动画系统做的非常出色,而且把最常用的显示.隐藏.淡入淡出.滑动显示和折叠凳效果都做了很好的封装.跟jQuery的选择器和事件配合起来,可以实现很多很绚的效果,而且简单易用兼容性好. ...
- 关于jquery所有动画都有速度和动画的方向(在宽度方向上的动画)?
不只是jquery的 animate 动画, 才有时间的 参数, 实际上, 在所有的动画中, 包括: show/hide/toggle, slideup/slidedown/slidetoggle, ...
随机推荐
- 用RestTemplate碰到的问题
给请求加上头信息 Request request = new Request(); HttpHeaders requestHeaders = new HttpHeaders(); requestHea ...
- JSP HTML error code
<html> <head> <title>Setting HTTP Status Code</title> </head> <body ...
- maven工程打包成runnable的jar包,拷贝资源和依赖jar包
eclipse下新建maven工程,生成runnable的jar包.之前一直是手动拷贝依赖的jar包和资源文件,烦得要死.上网可劲查了一下.解决方案如下. 在pom的配置文件中做如下配置: <b ...
- [JavaScript] 函数同名问题
存在同名函数时,最后的函数会覆盖掉以前的同名函数. var x = 1, y = z = 0; function add(n) { return n = n + 1; } y = add(x); fu ...
- cf(#div1 B. Dreamoon and Sets)(数论)
B. Dreamoon and Sets time limit per test 1 second memory limit per test 256 megabytes input standard ...
- 368. Largest Divisible Subset -- 找出一个数组使得数组内的数能够两两整除
Given a set of distinct positive integers, find the largest subset such that every pair (Si, Sj) of ...
- 玩转linux文件(重点)
一.几个主要的操作 mkdir—创建目录 cp—复制文件和目录 mv——移动/重命名文件和目录 rm——删除文件和目录 ln——创建硬链接和软链接 二.几个考点: 通配符 硬链接和软链接(符号链接) ...
- Java 线程综述
线程重在 线程同步和线程通信的编程 1.线程与进程? 线程是指程序在执行过程中,能够执行程序代码的一个执行单元.线程的状态:运行.就绪.挂起(suspend).结束; 进程是指一段正在执行的程序. ...
- iOS:控制器间的数据传递
在iOS开发中遇到的控制器间的数据传递主要有两种情况:顺传递与逆传递.顺传递是指数据的传递方向和控制器的跳转方向相同(如图1):逆传递是指数据的传递方向和控制器的跳转方向相反(如图2).这里分别介绍这 ...
- 《Pro AngularJS》学习小结-02
上一篇的项目只有一个单独的模板页面,加入了相应的controller,filter,使得页面上的数据能够动态的变化.现在我们开始建立并整合多个模板,加入购物车模块和结账checkout模块. 一.在页 ...