第一种：该方法隐藏所有 <p> 元素：

<html>

<head>

<script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript">

$(document).ready(function(){

$("button").click(function(){

$("p").hide();

});

});

</script>

</head>

<body>

<h2>This is a heading</h2>

<p>This is a paragraph.</p>

<p>This is another paragraph.</p>

<button>Click me</button>

</body>

</html>

第二种：（如何隐藏部分文本。）

<!DOCTYPE html>

<html>

<head>

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

<script type="text/javascript">

$(document).ready(function(){

$(".ex .hide").click(function(){

$(this).parents(".ex").hide("slow");

});

});

</script>

<style type="text/css">

div.ex

{

padding:7px;

border:solid 1px #c3c3c3;

}

</style>

</head>

<body>

<h3>中国办事处</h3>

<div class="ex">

<button class="hide" type="button">隐藏</button>

<p>联系人：张先生<br />

北三环中路 100 号<br />

北京</p>

</div>

<h3>美国办事处</h3>

<div class="ex">

<button class="hide" type="button">隐藏</button>

<p>联系人：David<br />

第五大街 200 号<br />

纽约</p>

</div>

</body>

</html>

第三种（hide() 和 show() 方法来隐藏和显示 HTML 元素：）

<!DOCTYPE html>

<html>

<head>

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

<script type="text/javascript">

$(document).ready(function(){

$("#hide").click(function(){

$("p").hide();

});

$("#show").click(function(){

$("p").show();

});

});

</script>

</head>

<body>

<p id="p1">如果点击“隐藏”按钮，我就会消失。</p>

<button id="hide" type="button">隐藏</button>

<button id="show" type="button">显示</button>

</body>

</html>

第四种：（带有 speed 参数的 hide() 方法：）

<!DOCTYPE html>

<html>

<head>

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

<script type="text/javascript">

$(document).ready(function(){

$("button").click(function(){

$("p").hide(1000);

});

});

</script>

</head>

<body>

<button type="button">隐藏</button>

<p>这是一个段落。</p>

<p>这是另一个段落。</p>

</body>

</html>

第五种：（使用 toggle() 方法来切换 hide() 和 show() 方法）

<!DOCTYPE html>

<html>

<head>

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

<script type="text/javascript">

$(document).ready(function(){

$("button").click(function(){

$("p").toggle();

});

});

</script>

</head>

<body>

<button type="button">切换</button>

<p>这是一个段落。</p>

<p>这是另一个段落。</p>

</body>

</html>

第六种：（jQuery fadeIn() 用于淡入已隐藏的元素，其中若想淡出则使用fadeOut（）方法，并且去掉div中的display:none）

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>三张图片的淡入效果</title>

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

<script type="text/javascript">

$(document).ready(function(){

$("button").click(function(){

$("#aa").fadeIn();

$("#bb").fadeIn("slow");

$("#cc").fadeIn(4000);

});

});

</script>

</head>

<body>

<p>点击之后，三张图片淡入</p>

<button>点击这里，使三个矩形淡入</button>

<div id="aa" style="width:80px;height:80px;display:none;"></div>

<br>

<div id="bb" style="width:80px;height:80px;display:none;"></div>

<br>

<div id="cc" style="width:80px;height:80px;display:none;"></div>

</body>

</html>

第七种（jQuery fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。）

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Document</title>

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

<script type="text/javascript">

$(document).ready(function(){

$("button").click(function(){

$("#aa").fadeToggle();

$("#bb").fadeToggle("slow");

$("#cc").fadeToggle(3000);

});

});

</script>

</head>

<body>

<button>请点击</button>

<div id="aa" style="width:80px;height:80px;"></div>

<br>

<div id="bb" style="width:80px;height:80px;"></div>

<br>

<div id="cc" style="width:80px;height:80px;"></div>

</body>

</html>

第八种（jQuery slideToggle() 方法可以在 slideDown() 与 slideUp() 方法之间进行切换。如果元素向下滑动，则 slideToggle() 可向上滑动它们。如果元素向上滑动，则 slideToggle() 可向下滑动它们。）

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Document</title>

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

<script type="text/javascript">

$(document).ready(function(){

$(".bb").click(function(){

$(".aa").slideToggle("slow");

});

});

</script>

<style type="text/css">

div.aa,p.bb{

margin: 0px;

padding: 5px;

text-align: center;

background: #e5eecc;

border: solid 1px #c3c3c3;

}

.aa{

height: 150px;

display: none;

}

</style>

</head>

<body>

<div class="aa">

<p>啦啦啦啦啦</p>

<p>哈哈哈哈哈</p>

</div>

<p class="bb">请点击这里</p>

</body>

</html>

第九种（图片的动画效果其中用到方法包括1、 $("div").animate({ left:'250px',opacity:'0.5',height:'150px', width:'150px' });2、$("div").animate({ left:'250px', height:'+=150px',width:'+=150px'})3、$("div").animate({height:'toggle'});4、  var div=$("div");div.animate({height:'300px',opacity:'0.4'},"slow");div.animate({width:'300px',opacity:'0.8'},"slow");div.animate({height:'100px',opacity:'0.4'},"slow");div.animate({width:'100px',opacity:'0.8'},"slow");5、 var div=$("div");div.animate({left:'100px'},"slow");div.animate({fontSize:'3em'},"slow")；）

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>图片的动画效果</title>

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

<script type="text/javascript">

$(document).ready(function(){

var div = $("div");

div.animate({left:'100px'},"slow");

div.animate({fontSize:'5em'},"slow");

$("button").click(function(){

$("#aa").css("color","red").slideUp(2000).slideDown(2000);

})

});

</script>

</head>

<body>

<div style="height:200px;width:200px;background:green;position:absolute;">HELLO</div>

<p id="aa">看我在不停的动！</p>

<button>请点击</button>

</body>

</html>

jQuary的相关动画效果的更多相关文章

  1. js进阶 13-6 jquery动画效果相关常用函数有哪些

    js进阶 13-6 jquery动画效果相关常用函数有哪些 一.总结 一句话总结:animate(),stop(),finish(),delat()四个. 1.stop()方法的基本用法是什么(sto ...

  2. Android动画效果之初识Property Animation（属性动画）

    前言: 前面两篇介绍了Android的Tween Animation(补间动画) Android动画效果之Tween Animation(补间动画).Frame Animation(逐帧动画)Andr ...

  3. 深入学习jQuery的三种常见动画效果

    × 目录 [1]显隐效果 [2]高度变化 [3]淡入淡出 前面的话 动画效果是jQuery吸引人的地方.通过jQuery的动画方法,能够轻松地为网页添加视觉效果,给用户一种全新的体验.jQuery动画 ...

  4. 使用 CSS3 实现超炫的 Loading（加载）动画效果

    SpinKit 是一套网页动画效果,包含8种基于 CSS3 实现的很炫的加载动画.借助 CSS3 Animation 的强大功能来创建平滑,易于定制的动画.SpinKit 的目标不是提供一个每个浏览器 ...

  5. jQuery动画效果animate和scrollTop结合使用实例

    CSS属性值是逐渐改变的,这样就可以创建动画效果.只有数字值可创建动画(比如 "margin:30px").字符串值无法创建动画(比如 "background-color ...

  6. jquery插件——点击交换元素位置（带动画效果）

    一.需求的诞生 在我们的网页或者web应用中,想要对列表中的元素进行位置调整(或者说排序)是一个常见的需求.实现方式大概就以下两种,一种是带有类似“上移”.“下移”的按钮,点击可与相邻元素交换位置,另 ...

  7. 15个来自 CodePen 的酷炫 CSS 动画效果【下篇】

    CodePen 是一个在线的前端代码编辑和展示网站,能够编写代码并即时预览效果.你在上面可以在线分享自己的 Web 作品,也可以欣赏到世界各地的优秀开发者在网页中实现的各种令人惊奇的效果. 今天这篇文 ...

  8. 赞！15个来自 CodePen 的酷炫 CSS 动画效果

    CodePen 是一个在线的前端代码编辑和展示网站,能够编写代码并即时预览效果.你在上面可以在线分享自己的 Web 作品,也可以欣赏到世界各地的优秀开发者在网页中实现的各种令人惊奇的效果. 今天这篇文 ...

  9. 12个来自 Codrops 的创新交互和动画效果

    产品的用户体验是否被用户所接受,很大一部分取决于交互界面的设计,交互界面设计是整个产品设计中的核心,对于产品品质有着决定性的影响.这里集合了12个来自 Codrops 的创新的界面交互和动画效果,值得 ...

随机推荐

  1. IOS小技巧整理

    1 随机数的使用  头文件的引用         #import <time.h>        #import <mach/mach_time.h> srandom()的使用 ...

  2. bzip2命令

    bzip2命令——压缩文件 命令所在路径:/usr/bin/bzip2 示例1: # bzip2 yum.log 压缩当前目录下yum.log文件成yum.log.bz2 示例2: # bzip2 - ...

  3. SAP CRM中间件下载equipment时遇到的一个错误

    在CRM开发系统上进行equipment下载,发现不工作.调试发现错误信息在下图定96行的WHEN default分支抛出的: MESSAGE ID 'AZ' ... 通过阅读源代码发现,ERP端支持 ...

  4. libxml2.dylb 导致<libxml/tree.h> 老是找不到头文件

    添加了libxml2.dylb的framework ,结果还是引用不了<libxml/tree.h>,  老是提示找不到头文件. 这个问题其实比较容易解决,但是XCode的版本问题确实让开 ...

  5. Latex 分块矩阵的处理

    在 \(\mathrm{\LaTeX}\) 中,如果想输入类似的矩阵: 可以这样实现: \[ \left[ \begin{array}{cc|cc|c} \lambda & 0 & 1 ...

  6. Hopfield 网络（上）

    讲的什么 这部分主要对 Hopfield 网络作一大概的介绍.写了其模型结构.能量函数和网络的动作方式.主要参考了网上搜到的一些相关 PPT.   概述 早在 1982 年,Hopfield 发表的文 ...

  7. 实验十一 团队作业7：团队项目设计完善&编码

    实验十一 团队作业7:团队项目设计完善&编码 实验时间 2019-6-6 Deadline: 2019-6-12 10:00,以团队随笔博文提交至班级博客的时间为准. 评分标准: 按时交 – ...

  8. 628. Maximum Product of Three Numbers@python

    Given an integer array, find three numbers whose product is maximum and output the maximum product. ...

  9. Python变量、常量、数据类型

    1. 变量 变量是一种使用方便的占位符,用于引用计算机内存地址,该地址可以存储Script运行时可更改的程序信息.例如,可以创建一个名为ClickCount的变量来存储用户单击Web页面上某个对象的次 ...

  10. git 常用命令及虚拟机服务器仓库搭建

    $ git config --global user.email "you@example.com" $ git config --global user.name "Y ...