第一种：该方法隐藏所有 <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. UVa 12219 Common Subexpression Elimination （stl，模拟，实现）

    一般来说,把一颗子树离散成一个int,把一个结点的字符离散成一个int会方便处理 直接map离散.当然一个结点最多只有4个小写字母,也可以直接编码成一个27进制的整数,舍掉0,为了区分0和0000. ...

  2. gcc, g++ - GNU 工程的 C 和 C++ 编译器 (egcs-1.1.2)

    总览 (SYNOPSIS) gcc [ option | filename ]... g++ [ option | filename ]... 警告 (WARNING) 本手册页 内容 摘自 GNU ...

  3. shell脚本，如何监控目录下的文件内容是否被修改。

    第一种方法是通过cmp来进行比对[root@localhost bo]# ls .html .html .html .html .html .html .html .html .html cat.sh ...

  4. SVN的使用二

    一,打开SCM 在xcode中,点击菜单: File -> Source Control –> Repositories 二,连接SVN服务器 1, 2,配置SVN服务器地址(http:/ ...

  5. JS设置组合快捷键

    为提升用户体验,想要在web页面中通过组合快捷键调出用户帮助页面,具体实现思路是监听keyup事件,在相应的处理函数中进行逻辑编写,代码如下 $(document).keyup(function (e ...

  6. 《Spring源码深度解析》第二章 容器的基本实现

    入门级别的spring配置文件 <beans xmlns="http://www.springframework.org/schema/beans" xmlns:xsi=&q ...

  7. Java测试技巧

    快捷键 修改快捷键 window->preference->general->keys: 查找引用:ctrl+shift+g 覆盖测试:alt+shift+E,T 复制一行:ctrl ...

  8. NGINX宏观手记

    一.这里的优化主要是指对nginx的配置优化,一般来说nginx配置文件中对优化比较有作用的主要有以下几项: nginx进程数,建议按照cpu数目来指定,一般跟cpu核数相同或为它的倍数. ``` w ...

  9. cvs 文件无法上传debug

    当时文件始终上传不成功时(一般先update后commit): cvs update filename report:move away filename ,it is in the way cvs ...

  10. django(django项目创建,数据库迁移)

    Django项目的创建与介绍 安装:pip3 install django==1.11 查看版本号:django-admin --version 新建项目: 1.切到目标目录 2.django-adm ...