显示与隐藏

  • 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. 牛客小白月赛4C——病菌感染

    链接:https://www.nowcoder.com/acm/contest/134/C 来源:牛客网 #include <bits/stdc++.h> using namespace ...

  2. java常见类

  3. 深浅拷贝--python(预习中随手写的。因为当时很无聊。。。)

    需要知识准备,pyhton基本常识,python的小数据池概念. 深浅拷贝操作需要模块导入:import copy emmm,对于python中的两种数据类型来说. 1.数字,字符串 2.列表,元祖, ...

  4. python脚本 mongodb到postgresql

    安装 mongo模块 pip install pymongo 安装postgresql 驱动 pip install python-psycopg2  1 # -*- coding: utf-8 -* ...

  5. 如何使用GeoServer发布地图

    本文所采用的系统为Windows 10 64bit操作系统,使用FireFox浏览器 一.安装配置Java的SDK 1. 安装JavaDevelopment Kit (JDK) 8,java开发环境, ...

  6. 网络流Edmonds-Karp算法入门

    今天自习课没事干,看书自学了一下网络流中的EK算法.(求最大流) 设s为源点,t为汇点,C为容量矩阵,F为流量矩阵,f为最大流量. 1.初始化F,f 2.用BFS在残量网络中找到一条从s到t的最短增广 ...

  7. 北京Uber优步司机奖励政策(1月16日)

    滴快车单单2.5倍,注册地址:http://www.udache.com/ 如何注册Uber司机(全国版最新最详细注册流程)/月入2万/不用抢单:http://www.cnblogs.com/mfry ...

  8. 13 内建属性 _getattribute_ 内建函数

    1.内建属性 2.__getattribute__ 属性访问时拦截器 class Itcast(object): def __init__(self,subject1): self.subject1 ...

  9. JS代码优化及技巧

    案例一  对象参数独立化 情景:为多个日期文本框添加日期选择器 源代码: $('#PropertySalesAdviceExchnagedDate1').datepicker({ showOn: 'b ...

  10. 如何用istio实现应用的灰度发布

    Istio为用户提供基于微服务的流量治理能力.Istio允许用户按照标准制定一套流量分发规则,并且无侵入的下发到实例中,平滑稳定的实现灰度发布功能. 基于华为云的Istio服务网格技术,使得灰度发布全 ...