显示与隐藏

  • 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的动画与特效的更多相关文章

  1. JQuery之动画与特效

    显示与隐藏 show(spped,[callback])与hide(spped,[callback]) speed可选填slow.normal.fast,对应的速度分别为600ms.400ms.200 ...

  2. jQuery+CSS3动画相册特效

    在线演示 本地下载

  3. 基于jQuery点击加载动画按钮特效

    分享一款基于jQuery点击加载动画按钮特效.这是一款基于jQuery+CSS3实现的鼠标点击按钮加载动画特效代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div ...

  4. 精选7款绚丽的HTML5和jQuery图片动画特效

    在HTML5出现后,图片就变得更加富有动感了,各种图片动画特效也层出不穷,例如图片播放器.图片导航.3D图片动画等等.本文将精选几款具有代表性的HTML5和jQuery图片动画特效,绚丽的画面.实用的 ...

  5. jQuery系列 第五章 jQuery框架动画特效

    第五章 jQuery框架动画特效 5.1 jQuery动画特效说明 jQuery框架中为我们封装了众多的动画和特效方法,只需要调用对应的动画方法传递合适的参数,就能够方便的实现一些炫酷的效果,而且jQ ...

  6. jQuery动画与特效

    参考:jQuery权威指南jQuery初步jQuery选择器jQuery操作domjQuery操作dom事件jQuery插件jQuery操作AjaxjQuery动画与特效jQuery实现导航栏jQue ...

  7. 4款基于jquery的列表图标动画切换特效

    网页中列表图标随处可见,特别是移动网页上,基本上的导航都采用了列表图标.今天给大家分享4款基于juqery的列表图标和关闭图标的动画切换特效.喜欢的网友赶紧收藏吧. 在线预览   源码下载 实现的代码 ...

  8. 10个非常炫酷的jQuery相册动画赏析

    我们经常可以在网页上看到形式各异的jQuery相册插件,由于现在浏览器对HTML5和CSS3的兼容越来越好了,所以很多jQuery相册插件都运用了CSS3的相关特性,形成了许多炫酷的动画特效.本文收集 ...

  9. 非常酷的jQuery/HTML5图片滑块特效 带弹性菜单

    新的一周刚刚开始,当我迷迷糊糊坐在办公桌前时,又不自主的去看了一些jQuery和HTML5的应用插件,今天我们来看一款非常酷的jQuery/HTML5图片滑块特效,这款插件的特点是图片上不错的弹性菜单 ...

随机推荐

  1. postgresql 数据库schema 复制

    ------ --- 导出 pg_dump -h *.*.*.* -p 5432 -d you_databasename -n you_schema -f you_sqlfile.sql ---- 替 ...

  2. MySQL高级第一章——架构介绍

    一.简介 是一个经典的RDBMS,目前归属于Oracle 高级MySQL包含的内容: MySQL内核 SQL优化工程师 MySQL服务器的优化 各种参数常量设定 查询语句优化 主从复制 软硬件升级 容 ...

  3. Spring Cloud 分布式事务管理

    Spring Cloud 分布式事务管理 在微服务如火如荼的情况下,越来越多的项目开始尝试改造成微服务架构,微服务即带来了项目开发的方便性,又提高了运维难度以及网络不可靠的概率. Spring Clo ...

  4. letsencrypt证书-使用certbot申请wildcard证书

    目录 1. certbot安装 2. 认证方式 3. 运行命令 4. 更新 1:下载 2:配置 3:申请证书 4:续期证书 1. certbot安装 cd /usr/local/src wget ht ...

  5. Qt-QML-安卓编译问题

    Qt的强大在于跨平台,但是在某些地方做的还是不好,想我这种白痴,在编译安卓的时候就遇到新的问题,我在PC上面编译没有问题的,跑到安卓上面就会出现问题,我猜测应该是Qt的下面的编译的时候,用的还是旧的安 ...

  6. hackerrank Project Euler #210: Obtuse Angled Triangles

    传送门 做出一个好几个星期屯下来的题目的感觉就是一个字: 爽! 上图的黄点部分就是我们需要求的点 两边的部分很好算 求圆的地方有一个优化,由于圆心是整数点,我们可以把圆分为下面几个部分,阴影部分最难算 ...

  7. Swift使用AVAudioPlayer来调节游戏的背景音乐大小

    音乐文件的声音大小有时在做为游戏背景音乐时会过大,而如果我们只是简单应用SKAudioNode来加载音乐的话,是无法进行声音大小的调节的,因此我们必须使用更强大的AVAudioPlayer来进行声音大 ...

  8. 爬虫1.1-基础知识+requests库

    目录 爬虫-基础知识+requests库 1. 状态返回码 2. URL各个字段解释 2. requests库 3. requests库爬虫的基本流程 爬虫-基础知识+requests库 关于html ...

  9. js如何判断客户端是iOS还是Android等移动终端

    判断原理:JavaScript是前端开发的主要语言,我们可以通过编写JavaScript程序来判断浏览器的类型及版本.JavaScript判断浏览器类型一般有两种办法,一种是根据各种浏览器独有的属性来 ...

  10. Java学习笔记-12.传递和返回对象

    1.Clone()方法产生一个object,使用方法后必须产生的object赋值. Vector v2 = (Vector)v.clone(); 2.Clone()方法在object中是保护类型方法, ...