强大的JQuery(二)--动画效果
上篇博客我们讲过了jquery的基础知识——强大的JQuery(一)--基础篇,作为web开发人员,网页的动画效果是不可缺少的,本篇博客重点来说说jquery的动画效果的实现。
因为动画的效果不能截图为大家展示,大家可以自行实验。
一、显示隐藏
1、jquery中通过hide() 和 show() 方法来隐藏和显示 HTML 元素:
<span style="font-size:18px;">$("#hide").click(function(){
$("p").hide();
}); $("#show").click(function(){
$("p").show();
});
</span>
2、通过toggle() 方法来切换 hide() 和 show() 方法。
<span style="font-size:18px;">$("button").click(function(){
$("p").toggle();
});</span>
二、淡入淡出
fadeIn() 用于淡入已隐藏的元素。
<span style="font-size:18px;">$("button").click(function(){
$("#div1").fadeIn();
$("#div2").fadeIn("slow");
$("#div3").fadeIn(3000);
});</span>
fadeOut() 方法用于淡出可见元素。
<span style="font-size:18px;">$("button").click(function(){
$("#div1").fadeOut();
$("#div2").fadeOut("slow");
$("#div3").fadeOut(3000);
});
</span>
fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。
<span style="font-size:18px;">$("button").click(function(){
$("#div1").fadeToggle();
$("#div2").fadeToggle("slow");
$("#div3").fadeToggle(3000);
});
</span>
三、滑动
滑动和上显示隐藏与淡入淡出的实现方法基本相同 。
方法名 |
含义 |
|
slideDown |
用于向下滑动元素 |
|
slideUp |
用于向上滑动元素 |
|
slideToggle |
如果元素向下滑动,则 slideToggle() 可向上滑动它们。 如果元素向上滑动,则 slideToggle() 可向下滑动它们。 |
四、自定义动画
自定义动画可以说既简单又复杂。简单说的是它只需要一个函数,复杂指的是这个函数可以添加n多个属性。
1、语法:
$(selector).animate({params},speed,callback);
必需的 params 参数定义形成动画的 CSS 属性。
可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。
可选的 callback 参数是动画完成后所执行的函数名称。
例如:
$("button").click(function(){
$("div").animate({left:'250px'});
});
提示:默认地,所有 HTML 元素都有一个静态位置,且无法移动。
如需对位置进行操作,要记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute!
2、jQuery animate() - 操作多个属性
<span style="font-size:18px;">$("button").click(function(){
$("div").animate({
left:'250px',
opacity:'0.5',
height:'150px',
width:'150px'
});
});
</span>
3、jQuery animate() - 使用队列功能
<span style="font-size:18px;">$("button").click(function(){
var div=$("div");
div.animate({height:'300px',opacity:'0.4'},"slow");
div.animate({width:'300px',opacity:'0.8'},"slow");
div.animate({height:'100px',opacity:'0.4'},"slow");
div.animate({width:'100px',opacity:'0.8'},"slow");
});
</span>
五、动画停止
jQuery stop() 方法
jQuery stop() 方法用于停止动画或效果,在它们完成之前。
stop() 方法适用于所有 jQuery 效果函数,包括滑动、淡入淡出和自定义动画。
语法:
$(selector).stop(stopAll,goToEnd);
解释:
可选的 stopAll 参数规定是否应该清除动画队列。默认是 false,即仅停止活动的动画,允许任何排入队列的动画向后执行。
可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。
因此,默认地,stop() 会清除在被选元素上指定的当前动画。
<span style="font-size:18px;">$("#stop").click(function(){
$("#panel").stop();
});</span>
最后:jquery为我们提供的几种动画,实现简单、功能强大,有了jquery,在javascript中非常令人头疼的动画制作变得极为容易,有了jQuery你会瞬间成为别人(那些不知道jQuery的人)眼里的动画高手!
强大的JQuery(二)--动画效果的更多相关文章
- jQuery Easing 动画效果扩展--使用Easing插件,让你的动画更具美感。
jQuery Easing 是一款比较老的jQuery插件,在很多网站都有应用,尤其是在一些页面滚动.幻灯片切换等场景应用比较多.它非常小巧,且有多种动画方案供选择,使用简单,而且免费. 引入Eas ...
- 第一百七十二节,jQuery,动画效果
jQuery,动画效果 学习要点: 1.显示.隐藏 2.滑动.卷动 3.淡入.淡出 4.自定义动画 5.列队动画方法 6.动画相关方法 7.动画全局属性 一.显示.隐藏 jQuery 中显示方法为:. ...
- jquery-12 jquery常用动画效果有哪些
jquery-12 jquery常用动画效果有哪些 一.总结 一句话总结:jquery可以用户animate()自定义动画,也可以slide和fade系列方法来设置动画. 1.动画效果如何设置执行时间 ...
- jQuery之动画效果show()......animate()
jQuery之动画效果 1.show()显示效果 语法:show(speed,callback) Number/String,Function speend为动画执行时间,单位为毫秒.也可以为slow ...
- 前端 ----jQuery的动画效果
03-jQuery动画效果 jQuery提供的一组网页中常见的动画效果,这些动画是标准的.有规律的效果:同时还提供给我们了自定义动画的功能. 显示动画 方式一: $("div" ...
- jQuery基础---动画效果
内容摘要: 1.显示.隐藏 2.滑动.卷动 3.淡入.淡出 4.自定义动画 5.列队动画方法 6.动画相关方法 7.动画全局属性 发文不易,转载请注明出处~ 一.显示.隐藏 jQuery 中显示方法 ...
- 前端基础-jQuery的动画效果
阅读目录 隐藏 显示 切换 下拉 上卷 显示 一.jQuery中隐藏元素的hide方法 让页面上的元素不可见,一般可以通过设置css的display为none属性.但是通过css直接修改是静态的布局, ...
- jquery animate 动画效果使用解析
animate的意思是:使有生气:驱动:使栩栩如生地动作:赋予…以生命作为形容词:有生命的:活的:有生气的:生气勃勃的 先看动画效果:http://keleyi.com/keleyi/phtml/jq ...
- jQuery Easing动画效果扩展(转)
jQuery API提供了简单的动画效果如淡入淡出以及自定义动画效果,而今天我给大家分享的是一款jQuery动画效果扩展增强插件jquery.easing.js,使用该插件可以实现直线匀速运功.变加速 ...
- jQuery的动画效果
jQuery 是一个 JavaScript 库.jQuery 库可以通过一行简单的标记被添加到网页中. <script type="text/javascript" src= ...
随机推荐
- Codeforces 543D. Road Improvement (树dp + 乘法逆元)
题目链接:http://codeforces.com/contest/543/problem/D 给你一棵树,初始所有的边都是坏的,要你修复若干边.指定一个root,所有的点到root最多只有一个坏边 ...
- 编译安装-Percona 5.6
CentOS 6.4编译安装Percona 5.6.16 Percona 下载地址:http://www.percona.com 一.卸载原有MySQL检查是否安装有MySQL Server: rpm ...
- C++、GDAL创建shapefile文件
源代码网址:http://download.csdn.net/detail/ivanljf/5834823 一.先贴出第一段代码: #include "ogrsf_frmts.h" ...
- mysql中key 、primary key 、unique key 与index区别
一.key与primary key区别 CREATE TABLE wh_logrecord ( logrecord_id ) NOT NULL auto_increment, ) default NU ...
- spring 切面 前置后置通知 环绕通知demo
环绕通知: <?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http:// ...
- HTML第六天学习笔记
今天主要对思维导图笔记进行了整理与更新:
- Why isn't there a SendThreadMessage function?
Here's an interesting customer question: Windows has PostMessage and SendMessage. It also has PostTh ...
- hdu oj Period (kmp的应用)
Period Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) Total Sub ...
- HTML5 自动聚焦 属性
原文 : HTML5 autofocus Attribut 原文发布时间: 2012年08月27日 翻译时间: 2013年8月6日 HTML5 推出了一大堆精彩的东西给我们. 过去我们要用JavaSc ...
- SSI框架中配置log4j
事实上主要是log4j配置,跟SSI关系不大. web.xml中加入 <context-param> <param-name>log4jConfigLocation</p ...