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图片滑块特效,这款插件的特点是图片上不错的弹性菜单 ...
随机推荐
- 牛客小白月赛4C——病菌感染
链接:https://www.nowcoder.com/acm/contest/134/C 来源:牛客网 #include <bits/stdc++.h> using namespace ...
- java常见类
- 深浅拷贝--python(预习中随手写的。因为当时很无聊。。。)
需要知识准备,pyhton基本常识,python的小数据池概念. 深浅拷贝操作需要模块导入:import copy emmm,对于python中的两种数据类型来说. 1.数字,字符串 2.列表,元祖, ...
- python脚本 mongodb到postgresql
安装 mongo模块 pip install pymongo 安装postgresql 驱动 pip install python-psycopg2 1 # -*- coding: utf-8 -* ...
- 如何使用GeoServer发布地图
本文所采用的系统为Windows 10 64bit操作系统,使用FireFox浏览器 一.安装配置Java的SDK 1. 安装JavaDevelopment Kit (JDK) 8,java开发环境, ...
- 网络流Edmonds-Karp算法入门
今天自习课没事干,看书自学了一下网络流中的EK算法.(求最大流) 设s为源点,t为汇点,C为容量矩阵,F为流量矩阵,f为最大流量. 1.初始化F,f 2.用BFS在残量网络中找到一条从s到t的最短增广 ...
- 北京Uber优步司机奖励政策(1月16日)
滴快车单单2.5倍,注册地址:http://www.udache.com/ 如何注册Uber司机(全国版最新最详细注册流程)/月入2万/不用抢单:http://www.cnblogs.com/mfry ...
- 13 内建属性 _getattribute_ 内建函数
1.内建属性 2.__getattribute__ 属性访问时拦截器 class Itcast(object): def __init__(self,subject1): self.subject1 ...
- JS代码优化及技巧
案例一 对象参数独立化 情景:为多个日期文本框添加日期选择器 源代码: $('#PropertySalesAdviceExchnagedDate1').datepicker({ showOn: 'b ...
- 如何用istio实现应用的灰度发布
Istio为用户提供基于微服务的流量治理能力.Istio允许用户按照标准制定一套流量分发规则,并且无侵入的下发到实例中,平滑稳定的实现灰度发布功能. 基于华为云的Istio服务网格技术,使得灰度发布全 ...