参考: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动画与特效的更多相关文章

  1. jQuery动画与特效详解

    本文主要是讲解和学习jQuery的自动显隐,渐入渐出等. 1.显示和隐藏hide()和show() 对于动画来说,显示和隐藏是最基本的效果之一,本节简单介绍jQuery的显示和隐藏. 代码如下: &l ...

  2. JavaScript交互式网页设计 • 【第8章 jQuery动画与特效】

    全部章节   >>>> 本章目录 8.1 显示隐藏动画效果 8.1.1 show() 方法与hide() 方法 8.1.2 toggle()方法 8.1.3 实践练习 8.2 ...

  3. jQuery动画特效实例教程

    本文以实例形式详细讲述了jQuery动画特效的实现方法. 1.自制折叠内容块 内容块如下:     <div class="module">   <div cla ...

  4. jQuery动画特效笔记

    show().hide().fadeIn().fadeOut().slideDown.slideUp.slideToggle()都接受可选的时长和回调参数(选项对象参数). toggle(durati ...

  5. 有时候就是看不进论文-jQuery动画特效篇&MySQL

    hi 早上知道新的乱斗模式后,没忍住开了几把,然后就无心论文了...用这个来破吧 1.jQuery -----动画特效----- ----调用show()和hide()方法显示和隐藏元素 show() ...

  6. 三、jQuery--jQuery基础--jQuery基础课程--第7章 jQuery 动画特效

    1.调用show()和hide()方法显示和隐藏元素 show()和hide()方法用于显示或隐藏页面中的元素,它的调用格式分别为:$(selector).hide(speed,[callback]) ...

  7. 基于jQuery点击加载动画按钮特效

    分享一款基于jQuery点击加载动画按钮特效.这是一款基于jQuery+CSS3实现的鼠标点击按钮加载动画特效代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div ...

  8. 分享JQuery动画插件Velocity.js的六种列表加载特效

    分享JQuery动画插件Velocity.js的六种列表加载特效.在这款实例中给中六种不同的列表加载效果.分别为从上飞入.从右侧飞入.从左侧飞入.和渐显.一起看下效果图: 在线预览   源码下载 实现 ...

  9. 4款基于jquery的列表图标动画切换特效

    网页中列表图标随处可见,特别是移动网页上,基本上的导航都采用了列表图标.今天给大家分享4款基于juqery的列表图标和关闭图标的动画切换特效.喜欢的网友赶紧收藏吧. 在线预览   源码下载 实现的代码 ...

随机推荐

  1. dubbo-admin 监控中心 部署

    dubbo-admin部署 下载: GitHub:https://github.com/search?q=dubbo-admin 百度网盘: 链接:https://pan.baidu.com/s/1v ...

  2. 深入探讨JS中的数组排序函数sort()和reverse()

    最近在研究Javascript发现了其中一些比较灵异的事情.有点让人感到无语比如: alert(typeof( NaN == NaN));//结果为假. alert(typeof( NaN != Na ...

  3. Maven 中央仓库搭建

    Maven中央仓库搭建 搭建系统:Linux Centos 7.4 x64 安装环境:JDK1.8.maven3.5.4.nexus-3.13 下载:nexus-3.13.0-01-unix.tar. ...

  4. mysql创建账号

    1.创建账号1)只读账号GRANT USAGE ON *.* TO 'testgao_r'@'192.168.1.1' IDENTIFIED BY 'password' WITH MAX_QUERIE ...

  5. [Linux 001]——计算机和操作系统的基础知识

    在正式开始学习 Linux 操作系统之前,有必要先回顾/学习一下计算机和操作系统的基本知识,为我们在后续的学习中铺路搭桥,在了解计算机一些基础原理的条件下再去进行学习,理解应该会更透彻一些.我会从一个 ...

  6. 20145333 《Java程序设计》第二次实验报告

    2014333 <Java程序设计>第二次实验报告 课程:Java程序设计 指导教师:娄嘉鹏 实验日期:2016.04.12 实验名称:Java面向对象程序设计 实验内容 初步掌握单元测试 ...

  7. win64 Python下安装PIL出错解决2.7版本 (3.6版本可以使用)

    转自:http://blog.csdn.net/lhh31/article/details/51979293 1.软件版本 首先我先安装了 python 2.7 pip是  8.1.2 2.当我要安装 ...

  8. $.getJSON()函数内的数据不能传到全局变量是怎么回事?

    var json_obj2; $.getJSON("js/invite_panel.json",function(data){ json_obj2=data }) console. ...

  9. windows下Redis主从复制配置(报错:Invalid argument during startup: unknown conf file parameter : slaveof)

    主从复制配置中的遇到的异常: Invalid argument during startup: unknown conf file parameter :  slaveof 把Redis文件夹复制两份 ...

  10. MCM写作

    MCM 写作 引言的写作 对赛题的解读. 对现有研究成果的松树与评论 对解题思路和主要方法进行简介 引言第一句话是最重要的,应该激发读者阅读兴趣,应该浅显易懂,不用或者少用数学公式 赛题选定以后要首先 ...