jQuery的动画与特效
显示与隐藏
- show() 和 hide() 方法
- 动画效果的show() 和 hide()
show(speed,[]callback)
hide(speed,[]callback)
speed:表示执行动画时的速度 [callback]:表示动画完成时的回调函数
- toggle() 方法
该方法就是用来切换元素的可见状态,如果是显示状态,则变成隐藏状态;如果是隐藏状态,则变成显示状态。
形式一:
toggle()
无参数调用
形式二:
toggle(switch)
switch为一个布尔值,即 true 或者 false 。当该值为 true 时显示元素;否则。隐藏。
形式三:
toggle(speed,[callback])
speed为速度。callback为回调函数。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script src="../Content/Scripts/bootstrap.min.js"></script>
<script src="../Content/Scripts/jquery-3.1.1.min.js"></script>
<link href="../Content/bootstrap.css" rel="stylesheet" />
<title></title>
<meta charset="utf-8" />
<style type="text/css">
input {
margin:8px
}
div{
margin-left:300px
}
.clsImg {
border:1px solid #ff0000
}
</style>
<script type="text/javascript">
$(function () {
$("input").each(function (index) {
$(this).click(function () {
//无参数
if (0 == index) {
$("div img").toggle();
}
//逻辑显示
if (1==index) {
$("div img").toggle(0 == index);
}
//动画显示
if (2==index) {
$("div img").toggle(300, function () {
$("div img").addClass("clsImg");
});
}
})
})
})
</script>
</head>
<body>
<div style="width:120px">
<div class="divMenu">
<input id="Button1" type="button" value="无参数" class="btn-primary"/>
<input id="Button2" type="button" value="逻辑显示" class="btn-primary" />
<input id="Button3" type="button" value="动画显示" class="btn-primary" />
</div>
<div>
<img src="../Image/5670d8646a4b6.jpg" alt="Alternate Text" style="width:300px;height:200px"/>
</div>
</div>
</body>
</html>
练习:
滑动
- slideDown() 与 slideUp()方法
slideDown(speed,[callback]) :图片宽度向下滑动,即显示图片
slideUp(speed,[callback]) :图片宽度向上滑动,即关闭图片
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<meta charset="utf-8" />
<script src="../Content/Scripts/bootstrap.min.js"></script>
<script src="../Content/Scripts/jquery-3.1.1.min.js"></script>
<link href="../Content/bootstrap.min.css" rel="stylesheet" />
<style type="text/css">
img {
width:400px;height:300px;
}
</style>
<script type="text/javascript">
$(function () {
var flag = false;
var $title = $("#title");
var $tip = $("#divTip");
$title.click(function () {
if (!flag) {
$("img").slideUp(1000, function () {
$tip.html("关闭成功!");
})
$(this).html("显示图片");
flag = true;
}
else {
$tip.html("");
$("img").slideDown(1000);
$(this).html("隐藏图片");
flag = false;
}
})
})
</script>
</head>
<body>
<div class="container">
<div id="title" class="panel-title">隐藏图片</div>
<div class="panel-body">
<img src="../Image/5670d8646a4b6.jpg" alt="Alternate Text" />
<div id="divTip"></div>
</div>
</div>
</body>
</html>
练习:
- slideToggle()方法
slideToggle(speed,[callback]) :图片高的时候关闭,图片关闭的时候,显示(以滑动的形式显隐)
淡入淡出
- fadeLn() 和 fadeOut() 方法
fadeLn(speed,[callback]) fadeOut(speed,[callback])
与show() 和 hide() 方法相比较 fadeIn() 和 fadeOut() 方法相比较,相同之处都是切换元素的显示状态,不同之处在于。前者的动画效果使用元素的width和height属性都会发生改变,而后者只是改变元素的透明度,并不修改其他属性。
- fadeTo() 方法
此方法是用来改变图片的透明度的;
fadeTo(speed,value) speed:改变速度 value:透明度值(取值范围一般0-1)
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<meta charset="utf-8" />
<script src="../Content/Scripts/bootstrap.js"></script>
<script src="../Content/Scripts/jquery-3.1.1.js"></script>
<link href="../Content/bootstrap.css" rel="stylesheet" />
<style type="text/css">
div {
margin:10px
}
img {
margin:10px
}
</style>
<script type="text/javascript">
$(function () {
$("select").change(function () {
var text = $("select option:selected").text();
$("img").fadeTo(1000,text);
})
})
</script>
</head>
<body class="container">
<div class="col-lg-12">
<div class="col-lg-5 col-lg-offset-3">
<select class="list-group-item col-lg-3 col-lg-offset-4">
<option selected="selected">1.0</option>
<option>0.8</option>
<option>0.6</option>
<option>0.4</option>
<option>0.2</option>
</select>
<img class="col-lg-12 img-thumbnail" src="../Image/5670d8646a4b6.jpg" alt="Alternate Text" />
</div>
</div>
</body>
</html>
练习:
自定义动画
- 简单的动画
animate() 方法给开发者自定义各种复杂、高级动画提供了极大的方便和空间。调用方法:
animate(params,[duration],[easing],[callback])
params:表示用于制作动画效果的属性样式和值得集合。
[duration]:表示三种默认的速度字符“slow”、“normal”、“fast”或自定义的数字。
[easing]:为动画插件使用,用于控制动画的表现效果,通常有“linear” 和 “swing”字符值
[callback]:为动画执行完后,执行的回调函数。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<meta charset="utf-8" />
<script src="../Content/Scripts/jquery-3.1.1.js"></script>
<style type="text/css">
img {
width:200px;
height:150px;
}
div {
margin-left:30%;
margin-top:20%;
}
</style>
<script>
$(function () {
$("img").click(function () {
$(this).animate({
width:"400px",
height:"300px"
}, 1000, function () {
$(this).css("border", "3px solid #666");
})
})
})
</script>
</head>
<body>
<div>
<img src="../Image/5670d8646a4b6.jpg" alt="Alternate Text" />
</div>
</body>
</html>
练习:
- 队列中的动画
所谓队列中的动画,是指一个元素执行了一个以上的多个动画效果,即有多个animate()方法在元素中执行,因此,根据这些animate()方法执行的先后顺序,形成了动画的“队列”,产生“队列后,动画的效果便按照“队列”顺序进行展示。
- 动画的停止和延时
stop([clearQueue],[gotoEnd]) :停止某个方法
clearQueue:一个布尔值,可以为一个函数返回值,什么时候停止。
gotoEnd:也是一个布尔值,同样可以为函数返回值,什么时候开始。
delay(duration,[queueName]) :延时某个动画的执行
duration:时间值
[queueName]:表示队列名词
jQuery的动画与特效的更多相关文章
- JQuery之动画与特效
显示与隐藏 show(spped,[callback])与hide(spped,[callback]) speed可选填slow.normal.fast,对应的速度分别为600ms.400ms.200 ...
- jQuery+CSS3动画相册特效
在线演示 本地下载
- 基于jQuery点击加载动画按钮特效
分享一款基于jQuery点击加载动画按钮特效.这是一款基于jQuery+CSS3实现的鼠标点击按钮加载动画特效代码.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div ...
- 精选7款绚丽的HTML5和jQuery图片动画特效
在HTML5出现后,图片就变得更加富有动感了,各种图片动画特效也层出不穷,例如图片播放器.图片导航.3D图片动画等等.本文将精选几款具有代表性的HTML5和jQuery图片动画特效,绚丽的画面.实用的 ...
- jQuery系列 第五章 jQuery框架动画特效
第五章 jQuery框架动画特效 5.1 jQuery动画特效说明 jQuery框架中为我们封装了众多的动画和特效方法,只需要调用对应的动画方法传递合适的参数,就能够方便的实现一些炫酷的效果,而且jQ ...
- jQuery动画与特效
参考:jQuery权威指南jQuery初步jQuery选择器jQuery操作domjQuery操作dom事件jQuery插件jQuery操作AjaxjQuery动画与特效jQuery实现导航栏jQue ...
- 4款基于jquery的列表图标动画切换特效
网页中列表图标随处可见,特别是移动网页上,基本上的导航都采用了列表图标.今天给大家分享4款基于juqery的列表图标和关闭图标的动画切换特效.喜欢的网友赶紧收藏吧. 在线预览 源码下载 实现的代码 ...
- 10个非常炫酷的jQuery相册动画赏析
我们经常可以在网页上看到形式各异的jQuery相册插件,由于现在浏览器对HTML5和CSS3的兼容越来越好了,所以很多jQuery相册插件都运用了CSS3的相关特性,形成了许多炫酷的动画特效.本文收集 ...
- 非常酷的jQuery/HTML5图片滑块特效 带弹性菜单
新的一周刚刚开始,当我迷迷糊糊坐在办公桌前时,又不自主的去看了一些jQuery和HTML5的应用插件,今天我们来看一款非常酷的jQuery/HTML5图片滑块特效,这款插件的特点是图片上不错的弹性菜单 ...
随机推荐
- Fedora 下面安装FTP服务
1. yum install vsftpd 2. systemctl disable vsftpd.service 3. systemctl stop vsftpd.service 4. system ...
- Java基础——网络编程
一.网络编程概述 概述: Java是 Internet 上的语言,它从语言级上提供了对网络应用程序的支持,程序员能够很容易开发常见的网络应用程序. Java提供的网络类库,可以实现无痛的网络连接,联网 ...
- 武汉Uber优步司机奖励政策
·武汉奖励前提 *必须满足当周平均评分4.7星及以上,且当周接单率70%及以上,才有资格获得奖励 *刷单和红线行为立即封号并取消当周全部奖励及车费! *从4月20日起,所有ETC和机场高速费用不参与奖 ...
- 【机器学习笔记】自组织映射网络(SOM)
什么是自组织映射? 一个特别有趣的无监督系统是基于竞争性学习,其中输出神经元之间竞争激活,结果是在任意时间只有一个神经元被激活.这个激活的神经元被称为胜者神经元(winner-takes-all ne ...
- 【POJ1733】Parity game
[POJ1733]Parity game 题面 vjudge 题解 比较简单的分类并查集 将一个查询操作看作前缀和\(s_r-s_{l-1}\)的奇偶性 将每个点拆成一奇一偶然后分别连边即可 如果一个 ...
- 利尔达仿真器加有人CC3200模块USR-C322上电测试
1. 使用利尔达的CC3200底板仿真器对有人CC3200模块USR-C322进行烧写,测试. 2. 连接的接口,需要连接6根线,如下,供电测试,第一波测试,输入+++回复a,然后在输入a,返回+OK ...
- Linux下查看CPU信息[/proc/cpuinfo]
最近在研究linux系统负载的时候,接触到一些关于CPU信息查看的知识,和大家分享一下.通过对/proc/cpuinfo文件中的参数的分析,也学到了不少东西. 在linux操作系统中,CPU的信息在启 ...
- 「日常训练」Caterpillar(POJ-3310)
题意与分析 一条很有趣的题目.给一个无向图,问它是否无环,且可以在上面找到一条线,使所有的顶点要么在线上要么不在线上但在与线相连的边上. 那么首先要确定所有点联系在一起.这个可以同判环一起处理:如果建 ...
- 「题目代码」P1054~P1059(Java)
P1054 猴子吃桃 import java.util.*; import java.io.*; import java.math.BigInteger; import java.lang.Chara ...
- liunx环境下安装禅道
环境: vm12.5.2 CentOS-7-x86_64 ZenTaoPMS.9.1.stable.zbox_64 SecureCRT 8.0 因为liunx环境下配置apache, php, mys ...