jQuery动画与特效
参考:jQuery权威指南
jQuery初步
jQuery选择器
jQuery操作dom
jQuery操作dom事件
jQuery插件
jQuery操作Ajax
jQuery动画与特效
jQuery实现导航栏
jQuery实现点击式选项卡
jQuery实现select三级联动
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
|
//1.显示与隐藏 //其实就是修改元素的高度和低度 //显示匹配的元素:show([speed,[easing],[fn]]) //speed:可传参数slow(0.6秒),normal(0.4秒),fast(0.2秒),或者直接一个毫秒值 //easing:用来指定切换效果,默认是swing,可用参数linear //fn:在动画完成时执行的函数,每个元素执行一次。 $( "#div1" ).show(); //直接显示 $( "#div1" ).show( "slow" ); //缓慢动画显示 $( "div" ).show(1000); //以毫秒数来显示动画 $( "div" ).show(1000, function (){alert( 'aa' )}); //显示完成后弹框 //隐藏匹配的元素:hide([speed,[easing],[fn]]) $( "#div1" ).hide(); //2.滑动 //slideDown()和slideUp() //向下显示:slideDown([speed],[easing],[fn]) //向上显示:slideUp([speed,[easing],[fn]]) //speed:可传参数slow(0.6秒),normal(0.4秒),fast(0.2秒),或者直接一个毫秒值 //easing:用来指定切换效果,默认是swing,可用参数linear //fn:在动画完成时执行的函数,每个元素执行一次。 <input type= "button" class= "btn2" value= "滑动出来" /> <input type= "button" class= "btn3" value= "隐藏回去" /> <div style= "display:none" > 测试<br> 测试<br> 测试<br> 测试<br> 测试<br> 测试<br> </div> $( function (){ $( ".btn2" ).click( function (){ $( "div" ).slideDown(); }); $( ".btn3" ).click( function (){ $( "div" ).slideUp(); }); }); //自动判断元素高低来决定向上或者向下滑动:slideToggle()参数同slideDown,slideUp //单击动画按钮,如果是显示的则隐藏,如果是隐藏的则自动显示 <input type= "button" class= "divFrame" value= "动画" /> <div> <img src= "a.jpg" /> </div> $( ".divFrame" ).click( function (){ $( "img" ).slideToggle(3000, function (){ $( "img" ).css({ border: 'solid 1px #ccc' }); }) }); //3.淡入淡出:fadeln()和fadeOut() //淡入和淡出也是改变元素的显示,跟show类型 //只不过show是改变元素高低,fade是改变元素的透明度 //使图片淡入或者淡出 <input type= "button" class= "in" value= "淡入" /> <input type= "button" class= "out" value= "淡出" /> <div> <img src= "a.jpg" style= "display:none" /> </div> //jQuery $( ".in" ).click( function (){ $( "img" ).fadeIn( "slow" , function () { alert( "淡入成功" ); }); }); $( ".out" ).click( function (){ $( "img" ).fadeOut( "slow" , function () { alert( "淡出成功" ); }); }); //可自定义透明度 //fadeTo([[speed],opacity,[easing],[fn]]) //其中多的一个参数opacity为透明度的值,比如0.7 $( "img" ).fadeTo( "slow" ,0.7); //4.自定义动画animate() //animate(params,[speed],[easing],[fn]) //params:一组包含作为动画属性和终值的样式属性和及其值的集合 //speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如:1000) //easing:要使用的擦除效果的名称(需要插件支持).默认jQuery提供"linear" 和 "swing". //fn:在动画完成时执行的函数,每个元素执行一次。 //单击变大按钮,将div变大 <button id= "go" >变大</button> <div id= "block" >Hello!</div> //jQuery $( "#go" ).click( function (){ $( "#block" ).animate({ width: "90%" , height: "100%" , //同样这里也可以使用left和right让元素左右移动 fontSize: "10em" }, 1000 ); }); |
jQuery动画与特效的更多相关文章
- jQuery动画与特效详解
本文主要是讲解和学习jQuery的自动显隐,渐入渐出等. 1.显示和隐藏hide()和show() 对于动画来说,显示和隐藏是最基本的效果之一,本节简单介绍jQuery的显示和隐藏. 代码如下: &l ...
- JavaScript交互式网页设计 • 【第8章 jQuery动画与特效】
全部章节 >>>> 本章目录 8.1 显示隐藏动画效果 8.1.1 show() 方法与hide() 方法 8.1.2 toggle()方法 8.1.3 实践练习 8.2 ...
- jQuery动画特效实例教程
本文以实例形式详细讲述了jQuery动画特效的实现方法. 1.自制折叠内容块 内容块如下: <div class="module"> <div cla ...
- jQuery动画特效笔记
show().hide().fadeIn().fadeOut().slideDown.slideUp.slideToggle()都接受可选的时长和回调参数(选项对象参数). toggle(durati ...
- 有时候就是看不进论文-jQuery动画特效篇&MySQL
hi 早上知道新的乱斗模式后,没忍住开了几把,然后就无心论文了...用这个来破吧 1.jQuery -----动画特效----- ----调用show()和hide()方法显示和隐藏元素 show() ...
- 三、jQuery--jQuery基础--jQuery基础课程--第7章 jQuery 动画特效
1.调用show()和hide()方法显示和隐藏元素 show()和hide()方法用于显示或隐藏页面中的元素,它的调用格式分别为:$(selector).hide(speed,[callback]) ...
- 基于jQuery点击加载动画按钮特效
分享一款基于jQuery点击加载动画按钮特效.这是一款基于jQuery+CSS3实现的鼠标点击按钮加载动画特效代码.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div ...
- 分享JQuery动画插件Velocity.js的六种列表加载特效
分享JQuery动画插件Velocity.js的六种列表加载特效.在这款实例中给中六种不同的列表加载效果.分别为从上飞入.从右侧飞入.从左侧飞入.和渐显.一起看下效果图: 在线预览 源码下载 实现 ...
- 4款基于jquery的列表图标动画切换特效
网页中列表图标随处可见,特别是移动网页上,基本上的导航都采用了列表图标.今天给大家分享4款基于juqery的列表图标和关闭图标的动画切换特效.喜欢的网友赶紧收藏吧. 在线预览 源码下载 实现的代码 ...
随机推荐
- dubbo-admin 监控中心 部署
dubbo-admin部署 下载: GitHub:https://github.com/search?q=dubbo-admin 百度网盘: 链接:https://pan.baidu.com/s/1v ...
- 深入探讨JS中的数组排序函数sort()和reverse()
最近在研究Javascript发现了其中一些比较灵异的事情.有点让人感到无语比如: alert(typeof( NaN == NaN));//结果为假. alert(typeof( NaN != Na ...
- Maven 中央仓库搭建
Maven中央仓库搭建 搭建系统:Linux Centos 7.4 x64 安装环境:JDK1.8.maven3.5.4.nexus-3.13 下载:nexus-3.13.0-01-unix.tar. ...
- mysql创建账号
1.创建账号1)只读账号GRANT USAGE ON *.* TO 'testgao_r'@'192.168.1.1' IDENTIFIED BY 'password' WITH MAX_QUERIE ...
- [Linux 001]——计算机和操作系统的基础知识
在正式开始学习 Linux 操作系统之前,有必要先回顾/学习一下计算机和操作系统的基本知识,为我们在后续的学习中铺路搭桥,在了解计算机一些基础原理的条件下再去进行学习,理解应该会更透彻一些.我会从一个 ...
- 20145333 《Java程序设计》第二次实验报告
2014333 <Java程序设计>第二次实验报告 课程:Java程序设计 指导教师:娄嘉鹏 实验日期:2016.04.12 实验名称:Java面向对象程序设计 实验内容 初步掌握单元测试 ...
- win64 Python下安装PIL出错解决2.7版本 (3.6版本可以使用)
转自:http://blog.csdn.net/lhh31/article/details/51979293 1.软件版本 首先我先安装了 python 2.7 pip是 8.1.2 2.当我要安装 ...
- $.getJSON()函数内的数据不能传到全局变量是怎么回事?
var json_obj2; $.getJSON("js/invite_panel.json",function(data){ json_obj2=data }) console. ...
- windows下Redis主从复制配置(报错:Invalid argument during startup: unknown conf file parameter : slaveof)
主从复制配置中的遇到的异常: Invalid argument during startup: unknown conf file parameter : slaveof 把Redis文件夹复制两份 ...
- MCM写作
MCM 写作 引言的写作 对赛题的解读. 对现有研究成果的松树与评论 对解题思路和主要方法进行简介 引言第一句话是最重要的,应该激发读者阅读兴趣,应该浅显易懂,不用或者少用数学公式 赛题选定以后要首先 ...