显示与隐藏

  • 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. Fedora 下面安装FTP服务

    1. yum install vsftpd 2. systemctl disable vsftpd.service 3. systemctl stop vsftpd.service 4. system ...

  2. Java基础——网络编程

    一.网络编程概述 概述: Java是 Internet 上的语言,它从语言级上提供了对网络应用程序的支持,程序员能够很容易开发常见的网络应用程序. Java提供的网络类库,可以实现无痛的网络连接,联网 ...

  3. 武汉Uber优步司机奖励政策

    ·武汉奖励前提 *必须满足当周平均评分4.7星及以上,且当周接单率70%及以上,才有资格获得奖励 *刷单和红线行为立即封号并取消当周全部奖励及车费! *从4月20日起,所有ETC和机场高速费用不参与奖 ...

  4. 【机器学习笔记】自组织映射网络(SOM)

    什么是自组织映射? 一个特别有趣的无监督系统是基于竞争性学习,其中输出神经元之间竞争激活,结果是在任意时间只有一个神经元被激活.这个激活的神经元被称为胜者神经元(winner-takes-all ne ...

  5. 【POJ1733】Parity game

    [POJ1733]Parity game 题面 vjudge 题解 比较简单的分类并查集 将一个查询操作看作前缀和\(s_r-s_{l-1}\)的奇偶性 将每个点拆成一奇一偶然后分别连边即可 如果一个 ...

  6. 利尔达仿真器加有人CC3200模块USR-C322上电测试

    1. 使用利尔达的CC3200底板仿真器对有人CC3200模块USR-C322进行烧写,测试. 2. 连接的接口,需要连接6根线,如下,供电测试,第一波测试,输入+++回复a,然后在输入a,返回+OK ...

  7. Linux下查看CPU信息[/proc/cpuinfo]

    最近在研究linux系统负载的时候,接触到一些关于CPU信息查看的知识,和大家分享一下.通过对/proc/cpuinfo文件中的参数的分析,也学到了不少东西. 在linux操作系统中,CPU的信息在启 ...

  8. 「日常训练」Caterpillar(POJ-3310)

    题意与分析 一条很有趣的题目.给一个无向图,问它是否无环,且可以在上面找到一条线,使所有的顶点要么在线上要么不在线上但在与线相连的边上. 那么首先要确定所有点联系在一起.这个可以同判环一起处理:如果建 ...

  9. 「题目代码」P1054~P1059(Java)

    P1054 猴子吃桃 import java.util.*; import java.io.*; import java.math.BigInteger; import java.lang.Chara ...

  10. liunx环境下安装禅道

    环境: vm12.5.2 CentOS-7-x86_64 ZenTaoPMS.9.1.stable.zbox_64 SecureCRT 8.0 因为liunx环境下配置apache, php, mys ...