JQuery的动画及其幻灯片效果
1.显示和隐藏hide()和show()
对于动画来说,显示和隐藏是最基本的效果之一,简单介绍jQuery的显示和隐藏。
<script type="text/javascript">
$(function() {
$("input:first").click(function() {
$("p").hide(); //隐藏
});
$("input:last").click(function() {
$("p").show(); //显示
});
});
</script>
<input type="button" value="Hide">
<input type="button" value="Show">
<p>点击按钮,看看效果</p>
<div><em>本节主要降级和学习jQuery的自动显隐,渐入渐出、飞入飞出。自定义动画等。 1.显示和隐藏hide()和show() 对于动画来说,显示和隐藏是最基本的效果之一,本节简单介绍jQuery的显示和隐藏。</em>
</div>
以上是对hide()和show()函数的测试。
2.使用show()、hide()和toggle()方法
上个例子对show()和hide()方法做了简单介绍,其实这两个方法可以接受参数控制显隐藏过程。
语法如下
show(duration,[callback]);
hide(duration,[callback]);
其中,duration表示动画执行时间的长短,可以表示速度的字符串,包括slow(0.6秒),normal(0.4秒),fast(0.2秒).也可以是表示时间的整数(毫秒)。callback是可选的回调函数。在动画完成之后执行
<script type="text/javascript">
$(function() {
$("input:first").click(function() {
$("p").hide(300); //隐藏
});
$("input:last").click(function() {
$("p").show(500); //显示
});
});
</script>
例子和第一个例子相同,只是对hide()和show()增加了时间参数。其实toogle()也可以加入事件参数。
如果直接调用toogle() 也可以实现显示和隐藏
$(function () {
$("#mybtn").toggle(function () {
$(".hidden").toggle();//获取到隐藏的将其显示
$(this).attr("src", "image/up.jpg");
}, function () {
$(".hidden").toggle();//获取到显示的将其隐藏
$(this).attr("src", "image/down.jpg");
});
});
3.使用fadeIn()和fadeOut()方式
对于动画效果显隐,jQuery还提供了fadeIn()个fadeOut()这两个实用的方法,他们的动画效果类似褪色,语法与show()和hide()完全相同。
fadeIn(duration, [callback]);
fadeOut(duration, [callback]);
例子
<script type="text/javascript">
$(function() {
$("input:eq(0)").click(function() {
$("img").fadeOut(3000); //逐渐fadeOut
});
$("input:eq(1)").click(function() {
$("img").fadeIn(1000); //逐渐fadeIn
});
});
</script>
<img src="http://study.ahthw.com/gtimg/book/2014/11/201411120129479688.jpg">
<input type="button" value="Hide">
<input type="button" value="Show">
fadeTo()方法的使用。
fadeTo() 方法将被选元素的不透明度逐渐地改变为指定的值。
例子:
<script type="text/javascript">
$(function() {
$("input:eq(0)").click(function() {
$("img").fadeOut(1000);
});
$("input:eq(1)").click(function() {
$("img").fadeIn(1000);
});
$("input:eq(2)").click(function() {
$("img").fadeTo(1000, 0.5);
});
$("input:eq(3)").click(function() {
$("img").fadeTo(1000, 0);
});
});
</script>
<p><img src="03.jpg"></p>
<input type="button" value="FadeOut">
<input type="button" value="FadeIn">
<input type="button" value="FadeTo 0.5">
<input type="button" value="FadeTo 0">
fadeOut相关参数
speed
可选。规定元素从当前透明度到指定透明度的速度。
可能的值:
毫秒 (比如 1500)
"slow"
"normal"
"fast"
opacity 必需。规定要淡入或淡出的透明度。必须是介于 0.00 与 1.00 之间的数字。
callback
可选。fadeTo 函数执行完之后,要执行的函数。
如需学习更多有关 callback 的内容,请访问我们的 jQuery Callback 这一章。
除非设置了 speed 参数,否则不能设置该参数。
4.幻灯片slideUp和slideDown效果
<script type="text/javascript">
$(function() {
$("input:eq(0)").click(function() {
$("div").add("img").slideUp(1000);
});
$("input:eq(1)").click(function() {
$("div").add("img").slideDown(1000);
});
$("input:eq(2)").click(function() {
$("div").add("img").hide(1000);
});
$("input:eq(3)").click(function() {
$("div").add("img").show(1000);
});
});
</script>
<input type="button" value="SlideUp">
<input type="button" value="SlideDown">
<input type="button" value="Hide">
<input type="button" value="Show"><br>
<div></div><img src="04.jpg">
5.自定义动画
考虑到框架的通用性及代码文件的大小,jQuery不能涵盖所有的动画效果,但它提供了animate()方法,能够使开发者自定义动画。本节主要通过介绍animate()方法的两种形式及应用。
animate()方法给开发者很大的空间。它一共有两种形式。第一种形式比较常用。用法如下
animate(params,[duration],[easing],[callback])
其中params为希望进行变幻的css属性列表,以及希望变化到的最终值,duration为可选项,与show()/hide()的参数含义完全相同。easing为可选参数,通常供动画插件使用。 用来控制节奏的变化过程。jQuery中只提供了linear和swing两个值.callback为可选的回调函数。在动画完成后触发。
需要注意。params中的变量遵循camel命名方式。例如paddingLeft不能写成padding-left.另外,params只能是css中用数值表示的属性。例如width.top.opacity等
像backgroundColor这样的属性不被animate支持。
<style>
div {
background-color: #FFFF00;
height: 40px;
width: 80px;
border: 1px solid #000000;
margin-top: 5px;
padding: 5px;
text-align: center;
}
</style>
<script type="text/javascript">
$(function() {
$("button").click(function() {
$("#block").animate({
opacity: "0.5",
width: "80%",
height: "100px",
borderWidth: "5px",
fontSize: "30px",
marginTop: "40px",
marginLeft: "20px"
}, 2000);
});
});
</script>
<button id="go">Go>></button>
<div id="block">动画!</div>
在params中,jQuery还可以用“+=”或者"-="来表示相对变化。如
<style>
div {
background-color: #FFFF00;
height: 40px;
width: 80px;
border: 1px solid #000000;
margin-top: 5px;
padding: 5px;
text-align: center;
position: absolute;
}
</style>
<script type="text/javascript">
$(function() {
$("button:first").click(function() {
$("#block").animate({
left: "-=80px" //相对左移
}, 300);
});
$("button:last").click(function() {
$("#block").animate({
left: "+=80px" //相对右移
}, 300);
});
});
</script>
<button >Go>></button>
<button >Go>></button>
<div id="block">动画!</div>
先将div进行绝对定位,然后使用animate()中的-=和+=分别实现相对左移和相对右移。
animate()方法还有另外一种形式,如下所示:
animate(params,options)
其中,params与第一种形式完全相同,options为动画可选参数列表,主要包括duration,esaing,callback,queue等,其中duration.easing.callback与第一种形式完全一样,queue为布尔值,表示当有多个 animate()组成jQuery时,当前animate()紧接这下一个animate(),是按顺序执行(true)还是同时触发false
如下例子,展示了animate()第二种用法。
<style>
div {
background-color: #FFFF22;
width: 100px;
text-align: center;
border: 2px solid #000000;
margin: 3px;
font-size: 13px;
font-family: Arial, Helvetica, sans-serif;
}
input {
border: 1px solid #000033;
}
</style>
<script type="text/javascript">
$(function() {
$("input:eq(0)").click(function() {
//第一个animate与第二个animate同时执行,然后再执行第三个
$("#block1").animate({
width: "90%"
}, {
queue: false,
duration: 1500
})
.animate({
fontSize: "24px"
}, 1000)
.animate({
borderRightWidth: "20px"
}, 1000);
});
$("input:eq(1)").click(function() {
//依次执行三个animate
$("#block2").animate({
width: "90%"
}, 1500)
.animate({
fontSize: "24px"
}, 1000)
.animate({
borderRightWidth: "20px"
}, 1000);
});
$("input:eq(2)").click(function() {
$("input:eq(0)").click();
$("input:eq(1)").click();
});
$("input:eq(3)").click(function() {
//恢复默认设置
$("div").css({
width: "",
fontSize: "",
borderWidth: ""
});
});
});
</script>
<input type="button" id="go1" value="Block1动画">
<input type="button" id="go2" value="Block2动画">
<input type="button" id="go3" value="同时动画">
<input type="button" id="go4" value="重置">
<div id="block1">Block1</div>
<div id="block2">Block2</div>
以上两个div块同时运用了三个动画效果,其中第一个div快的第一个动画添加了queue:false参数,使得前两项两个动画同时执行。
JQuery的动画及其幻灯片效果的更多相关文章
- 【jquery】幻灯片效果
闲着无聊,用Jquery写了一个幻灯片效果. 我这人喜欢造轮子,除了jquery这种有强大开发团队的框架级别JS,其实的一些小程序都是尽量自己写. 一是因为怕出问题了没人问,二是自己写的改起来也方便. ...
- 【Share Code | HTML & CSS & Javascript】动画片段幻灯片
[查看demo & 下载资源](https://zhaoshuquan.com/posts/15 介绍 本文使用"Pieces"库轻松实现动画片段幻灯片效果. 今天我们想向 ...
- jQuery Easing动画效果扩展(转)
jQuery API提供了简单的动画效果如淡入淡出以及自定义动画效果,而今天我给大家分享的是一款jQuery动画效果扩展增强插件jquery.easing.js,使用该插件可以实现直线匀速运功.变加速 ...
- jQuery Easing 动画效果扩展
jQuery API提供了简单的动画效果如淡入淡出以及自定义动画效果,而今天我给大家分享的是一款jQuery动画效果扩展增强插件jquery.easing.js,使用该插件可以实现直线匀速运功.变加速 ...
- jQuery Easing 动画效果扩展--使用Easing插件,让你的动画更具美感。
jQuery Easing 是一款比较老的jQuery插件,在很多网站都有应用,尤其是在一些页面滚动.幻灯片切换等场景应用比较多.它非常小巧,且有多种动画方案供选择,使用简单,而且免费. 引入Eas ...
- jquery animate 动画效果使用解析
animate的意思是:使有生气:驱动:使栩栩如生地动作:赋予…以生命作为形容词:有生命的:活的:有生气的:生气勃勃的 先看动画效果:http://keleyi.com/keleyi/phtml/jq ...
- jQuery之动画效果show()......animate()
jQuery之动画效果 1.show()显示效果 语法:show(speed,callback) Number/String,Function speend为动画执行时间,单位为毫秒.也可以为slow ...
- 一个很好的幻灯片效果的jquery插件--kinMaxShow
在做一些网站时,或多或少的要给网站做幻灯片效果,以前每次做这个效果,都是现成带网上找,找到的很多很杂,而且用完后就不会再理会更加不会去总结代码. 无意中找到了kinMaxShow这个插件,机会满足了我 ...
- jquery特效 幻灯片效果
jquery特效 幻灯片效果,效果图如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Cont ...
随机推荐
- RTP RTCP在音视频传输与同步方面的使用
转自:http://blog.csdn.net/kof98765/article/details/17733701 1 音视频实时传输 1.1 Jrtplib库介绍 本系统采用开源库Jrtplib进行 ...
- 一些常用的C++标准函数
一些常用的C++标准函数 double atof(const char* p); int atoi(const char* p); long atol(const char* p); cstdlib ...
- 10个很棒的学习Android 开发的网站(转)
看到江湖旅人 写的<10个很棒的学习iOS开发的网站 - 简书>,所以就忍不住写Android 啦,也希望对大家有帮助.我推荐的网站,都是我在学习Android 开发过程中发现的好网站,给 ...
- Get open Popups
public IEnumerable<Popup> GetOpenPopups() { return PresentationSource.CurrentSources.OfType< ...
- java集群技术(转)
来源:http://blog.csdn.net/cdh1213/article/details/21443239 序言 越来越多的关键应用运行在J2EE(Java2, Enterprise Editi ...
- thinkphp测试方法
1.如果是单个函数可以使用命令行的模式调试. 2.如果是公用函数可以新增一个控制器函数来测试: 如测试这条公共函数
- 解读Web Page Diagnostics网页细分图
解读Web Page Diagnostics网页细分图 http://blog.sina.com.cn/s/blog_62b8fc330100red5.html Web Page Diagnostic ...
- CentOS VMware 配置IP小结 静态 配置 桥接 NAT
系统启动后可先ping下外网或局域网内其它机器. 如果配置虚拟机时选择的NAT上网方式,后面需要配置固定IP,请先参见VMware NAT方式下设置静态IP获得可用的IP范围和网关等信息. 先将ifc ...
- 在C#程序中实现插件架构
阅读提示:这篇文章将讲述如何利用C#奇妙的特性,实现插件架构,用插件(plug-ins)机制建立可扩展的解决方案. 在.NET框架下的C#语言,和其他.NET语言一样提供了很多强大的特性和机制.其中一 ...
- json 转化
1. 把java 对象列表转换为json对象数组,并转为字符串 复制代码代码如下: JSONArray array = JSONArray.fromObject(userlist); S ...