第五篇 jQuery特效与动画
5.1 show()与hide()方法
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>show()与hide()方法</title>
<style type="text/css">
body{ font-size:13px;}
.artFram{ border:solid 1px #ccc; background-color:#eee; width:260px; padding:8px; word-break:break-all;}
.artList{ line-height:.8em;}
#showandhide{}
</style>
<script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>
<script>
$(function(){
var $link = $(".artList a");
var $hide = $(".artList :eq(4)");
$link.click(function(){
if($(this).html()=="显示")
{
$(this).html("隐藏");
$hide.show(); }
else
{
$(this).html("显示");
$hide.hide();
}
})
})
</script>
</head>
<body> <div class="artFram">
<div class="artList">
<span> </span>
<br />
<span>111显示显示显示</span>
<br>
<span id="showandhide" style="display:none;"></span>
<br />
<a href="javascript:void(0)">显示</a>
</div>
</div> </body>
</html>
5.2 动画效果的show()与hide()方法
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>动画效果的show()与hide()方法</title>
<style type="text/css">
body{ font-size:13px;}
img{ display:none; cursor:pointer;}
</style>
<script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>
<script>
$(function(){
//show(speed,[callback])
//hide(speed,[callback])
$("a").click(function(){
$("img").show(,function(){
$(this).css("border","solid 1px #ccc");
})
})
//
$("img").click(function(){
$(this).hide();
})
})
</script>
</head>
<body>
<a href="javascript:void(0)">显示</a>
<img src="img/1.png" />
</body>
</html>
5.3 toggle()方法
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>toggle()方法</title>
<style type="text/css">
body{ font-size:13px;}
.divFrame{ width:180px;}
.divFrame .divMenu{ float:left;}
.divFrame .divContent{ float:right;}
.divFrame .divContent img{ display:none;}
.btn{ border:# 1px solid; padding:2px; width:80px; margin-bottom:5px;}
</style>
<script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>
<script>
$(function(){
//--切换元素可见状态,如果是显示状态,则变成隐藏状态;如果是隐藏状态,则变成显示状态
//toggle()
//toggle(switch)
//toggle(speed,[callback])
$("input:eq(0)").click(function(){
$("img").toggle();
}) $("input:eq(1)").click(function(){
var intI = ;
var blnA = intI > ;
$("img").toggle(blnA); //blnA--false
}) $("input:eq(2)").click(function(){
$("img").toggle(,function(){
$(this).css({"border":"solid 1px #ccc","padding":"2px"});
});
}) /*无论是show(),hide(),toggle(),当以动画效果切换页面元素可见状态时,其元素的width,height,padding和margin属性都将以动画的效果展示*/ })
</script>
</head>
<body> <div class="divFrame">
<div class="divMenu">
<input id="Button1" type="button" value="无参数" class="btn" /><br />
<input id="Button2" type="button" value="逻辑显示" class="btn" /><br />
<input id="Button3" type="button" value="动画显示" class="btn" />
</div>
<div class="divContent">
<img src="img/2.png" alt="" />
</div>
</div> </body>
</html>
5.4 slideDown()与slideUp()
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>slideDown()与slideUp()</title>
<style type="text/css">
body{ font-size:13px;}
.divFrame{ width:100px; border:solid 1px #;}
.divFrame .divTitle{ padding:5px; background-color:#eee;}
.divFrame .divContent{ padding:8px;}
.divFrame .divContent img{ border:solid 1px #ccc; padding:2px;}
</style>
<script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>
<script> //滑动的动画效果就是改变元素的高度
//slideDown(speed,[callback]) --以动画的效果将所选择元素的高度向下增大,呈现一种"滑动"的效果,而元素的其他属性并不发生变化
// [callback] --为动画显示完成后,执行的回调函数...
//slideUp(speed,[callback]) -- 以动画的效果将所选择元素的高度向上减小... $(function(){
var blnShow = false;
var $Title = $(".divTitle");
var $Tip = $("#divTip"); $Title.click(function(){
if(!blnShow)
{
$("img").slideUp(,function(){
$Tip.html("关闭成功！");
});
$(this).html("显示图片");
blnShow = true;
}
else
{
$Tip.html("");
$("img").slideDown();
$(this).html("隐藏图片");
blnShow = false;
}
}) })
</script>
</head>
<body> <div class="divFrame">
<div class="divTitle">隐藏图片</div>
<div class="divContent">
<img src="img/3.png" alt="" />
<div id="divTip"></div>
</div>
</div> </body>
</html>
5.5 slideToggle()方法
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>slideToggle()方法</title>
<style type="text/css">
.divFrame{ border:solid 1px #; background-color:#eee; padding:5px; width:149px;}
.divFrame img{ border:solid 1px #eee; padding:2px;}
</style>
<script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>
<script>
$(function(){
//slideToggle(speed,[callback]) --以动画的效果切换所选择元素的高度,即:如果高,则减小;如果低,则增大.
$(".divFrame").click(function(){
$("img").slideToggle(,function(){
$("img").css("border","solid 1px #ccc");
});
});
})
</script>
</head>
<body> <div class="divFrame">
<img src="img/1.png" alt="" title="" />
</div> </body>
</html>
5.6 fadeIn()和fadeOut()方法
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>fadeIn()和fadeOut()方法</title>
<style type="text/css">
.divFrame{ border: solid 1px #;width: 188px;text-align: center;}
.divFrame .divTitle{background-color: #eee;padding: 5px 0px 5px 0px;}
.divFrame .divContent{padding: 5px 0px 5px 0px;}
.divFrame .divContent img{border: solid 1px #eee;padding: 2px;}
.divFrame .divTip{position: absolute;padding: 90px 0px 0px 60px;font-size: 13px;font-weight: bold;}
.btn{border: # 1px solid;padding: 2px;width: 80px;}
</style>
<script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>
<script>
//fadeIn(speed,[callback]) --通过改变所选元素透明度,实现淡入的动画效果
//fadeOut(speed,[callback]) --通过改变所选元素透明度,实现淡出的动画效果 $(function(){ //fadeIn
$("#Button1").click(function(){
$(".divTip").html("");
$("img").fadeIn(,function(){
$(".divTip").html("淡入");
})
}) //fadeOut
$("#Button2").click(function(){
$(".divTip").html("");
$("img").fadeOut(,function(){
$(".divTip").html("淡出");
})
}) }) </script>
</head>
<body> <div class="divFrame">
<div class="divTitle">
<input id="Button1" type="button" value="fadeIn" class="btn"/>
<input id="Button2" type="button" value="fadeOut" class="btn"/>
</div>
<div class="divContent">
<div class="divTip"></div>
<img src="img/1.png" alt="" title=""/>
</div>
</div> </body>
</html>
5.7 fadeTo()方法
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>fadeTo()方法</title>
<style type="text/css">
.divFrame{border: solid 1px #;width: 197px;text-align: center;}
.divFrame .divTitle{background-color: #eee;padding: 5px 0px 5px 0px;}
.divFrame .divContent{padding: 5px 0px 5px 0px;}
.divFrame .divContent img{border: solid 1px #eee;}
</style>
<script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>
<script>
//fadeTo(speed,opacity,[callback]) --将所选择元素的不透明度以动画的效果调整到指定的不透明度值
//opacity --> 0.0-1.0
$(function(){
$("#Select1").change(function(){
var fitValue = $("#Select1").val();
$("img").fadeTo(,fitValue);
})
})
</script>
</head>
<body> <div class="divFrame">
<div class="divTitle">
<select name="" id="Select1">
<option value="0.2">0.2</option>
<option value="0.4">0.4</option>
<option value="0.6">0.6</option>
<option value="0.8">0.8</option>
<option value="1.0" selected="selected">1.0</option>
</select>
</div>
<div class="divContent">
<img src="img/1.png" title="">
</div>
</div> </body>
</html>
第五篇 jQuery特效与动画的更多相关文章
- 第五章 jQuery中的动画
通过jQuery中的动画方法,能轻松地为网页添加精彩的视觉效果,给用户一种全新体验. 1.show()方法和hide()方法 该方法的功能与css()方法设置display属性效果相同. 给show( ...
- 第二十五篇 jQuery 学习7 获取并设置 CSS 类
jQuery 学习7 获取并设置 CSS 类 jQuery动态控制页面,那么什么是动态呢?我们就说一下静态,静态几乎又纯html+css完成,就是刷新页面之后,不会再出现什么变动,一个实打实的静态 ...
- jQuery系列 第五章 jQuery框架动画特效
第五章 jQuery框架动画特效 5.1 jQuery动画特效说明 jQuery框架中为我们封装了众多的动画和特效方法,只需要调用对应的动画方法传递合适的参数,就能够方便的实现一些炫酷的效果,而且jQ ...
- 如何制作一款HTML5 RPG游戏引擎——第五篇，人物&人物特效
上一次,我们实现了对话类,今天就来做一个游戏中必不可少的——人物类. 当然,你完全是可以自己写一个人物类,但是为了方便起见,还是决定把人物类封装到这个引擎里. 为了使这个类更有意义,我还给人物类加了几 ...
- 第十五篇：jQuery
本篇内容 简介 使用 一. 简介 jQuery 是一个 JavaScript 库. jQuery 极大地简化了 JavaScript 编程. jQuery 很容易学习. jQuery 库可以通过一行简 ...
- jQuery 特效：盒子破碎和移动动画效果
今天,我们将创建一个使用 jQuery 制作的非常甜蜜的动画效果.我们的想法是在网站的顶部有小盒子,当一个菜单项被点击时,箱子动画形成的主要内容区域分散在各处.我们会用一些不同的动画效果,我们将为菜单 ...
- jQuery碎语(3) 动画特效
5.动画特效 ● 自制折叠内容块 内容块如下 <div class="module"> <div class="caption"> &l ...
- 测开之路一百零一：jquery文字特效、动画、方法链
文字特效 html内容 1.卷起/展开 2.隐藏/显示 3.淡入淡出 <!DOCTYPE html><html lang="en"><head> ...
- jQuery基础（动画篇 animate，显示隐藏，淡入淡出，下拉切换）
1.jQuery中隐藏元素的hide方法 让页面上的元素不可见,一般可以通过设置css的display为none属性.但是通过css直接修改是静态的布局,如果在代码执行的时候,一般是通过js控制元 ...
随机推荐
- C++入门经典-例8.2-构造函数的访问顺序
1:父类和子类中都有构造函数和析构函数,那么子类对象在创建时是父类先进行构造还是子类先进行构造?同样,在子类对象释放时,是父类先进行释放,还是子类先进行释放?这都是有先后顺序的.答案是当从父类派生一个 ...
- （转）linux中wget未找到命令
转:https://blog.csdn.net/djj_alice/article/details/80407769 在装数据库的时候发现无法使用wget命令,提示未找到命令,如图所示 那是因为没有安 ...
- Git clone 报错 128
使用tortoiseGit检出项目是报错,错误代码128: 使用git bash检出相同目录时返回 git clone fatal:destination path already exists an ...
- 微信小程序之阻止冒泡事件
众所周知,在微信小程序给标签绑定点击方法大家都会想到 "bindtap" 但是在页面中会遇到 点击 会冒泡而触发其他元素的时间发生 那么怎么办呢 就把引发冒泡事件的始作俑者的 bi ...
- 理解MVC/MVP/MVVM的区别
转载至[http://www.ruanyifeng.com/blog/2015/02/mvcmvp_mvvm.html] MVC 所有的通信都是单向的. M(Model)V(View)C(Contro ...
- Spring Bean学习创建及使用<二>
转自:http://blessht.iteye.com/blog/1162131 平常的java开发中,程序员在某个类中需要依赖其它类的方法,则通常是new一个依赖类再调用类实例的方法,这种开发存在的 ...
- gitlab仓库的使用
一.gitlab简介 gitlab是一个用于仓库管理系统的开源项目,使用git作为代码管理工具,并在此基础上搭建web服务. [管理命令] gitlab-ctl stop gitlab- ...
- golang实现四种排序(快速，冒泡，插入，选择)
本文系转载 原文地址: http://www.limerence2017.com/2019/06/29/golang07/ 前面已经介绍golang基本的语法和容器了,这一篇文章用golang实现四种 ...
- Python面试简介及并行并发
今天的分享内容大体如下: 一. 面试 1. 什么是面试 2. 优秀的面试 二. Python综述 1. Python设计哲学及版本变迁 2. Python发展现状及其他语言使用场景 3. GIL 4. ...
- Caused by: com.rabbitmq.client.AuthenticationFailureException: ACCESS_REFUSED - Login was refused using authentication mechanism PLAIN. For details see the broker logfile.的几种原因
环境:centos 7+ 1.查看用户是否存在 进入安装目录使用./sbin/rabbitmqctl list_users查看是否存在用户 比如:./usr/local/rabbitmq/rabbit ...