锋利的jQuery 要点归纳（三） jQuery中的事件和动画（下：动画篇）
转载 &更新时间：日 17:07:20 & 作者：
《锋利的jQuery》要点归纳（三） jQuery中的事件和动画（下：动画篇）
二、动画 1 show()方法和hide()方法
代码如下: $("selector").show() 从display:none还原元素默认或已设置的display属性 $("selector").hide() 设置元素的display样式为none，等于$("selector").css("display","none")
（注：传入参数后，.show()和.hide()方法同时动画改变元素的width,height和透明属性；传入参数控制显隐速度，单位毫秒，如.show(600)，也可传入fast,normal,slow，fast为200毫秒，normal为400毫秒，slow为600毫秒） 2 fadeIn()方法和fadeOut()方法
代码如下: $("selector").fadeIn() 控制透明度在指定时间内从display:none提高至完全显示 $("selector").fadeOut() 控制透明度在指定时间内降低至display:
3 slideUp()方法和slideDown()方法
代码如下: $("selector").slideUp() 控制元素高度在指定时间内从下到上缩短至display: $("selector").slideDown() 控制元素高度在指定时间内从display:none延伸至完整高度
4 自定义动画方法animate()
代码如下: $("selector").animate(params,speed,callback); params:一个包含样式属性及值的映射，比如{property1:"value1",property2:"value2",...} speed:速度参数，可选 callback:在动画完成时执行的参数（即回调函数），可选
常见的动画例子
代码如下: &script& //自定义动画的例子 $(function(){ $("selector").click(function(){ $(this).animate({left:"500px"},3000); //selector在3秒内向右移动500px }); }) &/script&
代码如下: &script& //累加、累减动画的例子 $(function(){ $("selector").click(function(){ $(this).animate({left:"+=500px"},3000); //连续触发click事件时，在当前位置累加500px }); }) &/script& &script& //多重动画的例子 $(function(){ $("selector").click(function(){ $(this).animate({left:"500px",top:"300px",height:"+=100px"},3000); //向右下30度方向运动，同时增加高度 }); }) &/script& &script& //按顺序执行多个动画的例子 $(function(){ $("selector").click(function(){ $(this).animate({left:"500px"},3000).animate({top:"300px"},3000); //动画队列 }); }) &/script&
5 动画回调函数 因css()方法不会加入动画队列中，则会马上执行。如若要在动画最后改变selector的css，需要利用回调函数 例：
代码如下: &script& $("selector").click(function(){ $(this).animate({property1:"value1"},time).animate({property2:"value2"},time,function(){ $(this).css("property3","value3"); //css()方法利用回调函数加入动画队列 }); }) &/script&
（注：动画回调函数适用于jQuery所有的动画效果方法） 6 停止动画和判断是否处于动画状态 $("selector").stop() 结束当前动画，如队列中存在下一个动画则立即执行下一个动画，格式$("selector").stop([clearQueue][,gotoEnd]) 切换动画的例子：
代码如下: &script& $("selector").hover(function(){ $(this).stop().animate(); },function(){ $(this).stop().animate(); }) &/script&
clearQueue参数设置为true时，将清空当前元素接下来尚未执行完的动画队列 例：
代码如下: &script& $("selector").hover(function(){ $(this).stop(true).animate().animate() //如此时触发光标移出事件，直接跳过后面的动画队列，避免执行本队列第二个动画 },function(){ $(this).stop(true).animate().animate() }) &/script&
gotoEnd参数设置为true时，可将正在执行的动画直接到达结束时刻的状态 is(":animated") 判断元素是否处于动画状态，可用于防止动画累积 例：
代码如下: &script& if(!$("selector").is(":animated")){ //判断元素是否正处于动画状态 //如果当前没有进行动画，则添加新动画 } &/script&
7 其他动画方法 3个专门用于交互的动画方法：toggle(speed,[callback]); slideToggle(speed,[callback]); fadeTo(speed,opacity,[callback])
代码如下: $("selector").toggle() 切换元素的可见状态，如元素隐藏则切换为可见，反之亦然 $("selector").slideToggle() 通过高度变化来切换元素的可见性 $("selector").fadeTo() 把元素的不透明度以渐进方式调整到指定的值，如$("selector").fadeTo(600,0.2);以600毫秒速度将内容调整到20%透明度
8 动画方法概括
代码如下: toggle()用来代替hide()和show() slideToggle()用来代替slideUp()和slideDown() animate()可代替所有动画方法
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具jquery实现AJAX无刷新。。有哪些要点。。最好能给个有详细注释的实例。。谢谢_百度知道
jquery实现AJAX无刷新。。有哪些要点。。最好能给个有详细注释的实例。。谢谢
我有更好的答案
这里面你想找的代码都有
采纳率：43%
var path=“a.jsp”; //路径var content=$.ajax({type:&get&,url:path,async:false});var json = content.responseT
1.get的请求
'?app=news&act=groupcate&do=del&group_id='+group_id+'&cate_id='+cate_id, //请求的地址
function (result)
//这里对返回来的信息进行处理
);2.post 请求$.post(
'请求的地址',
username:jack //请求的参数
function(result)
//这里是请求回来返回来的值 进行处理
});3.ajaxAjax 最常见的用法就是把一块 HTML 代码加载到页面的某个区域中去。为此，只需简单地选择所需的元素，然后使用 load() 函数即可。下面是一个用于更新统计信息的示例：$('#stats').load('stats.html');$.ajax({
url : ajaxUrl, //请求地址
type : 'get', //请求类型 默认get
cache:true,
data : {cateID:12,cityID:177,page:1,username:jack}, //请求时候自带的参数
dataType : 'json', //返回来用json
error:function()
//这里对返回错误的信息进行处理
success : function (json)
//返回成功执行
为您推荐：
其他类似问题
jquery的相关知识
换一换
回答问题，赢新手礼包
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。重点本科 ，一年web前端工作经验 div+css 切图，js ，以及jquery，以及 ajax都熟练应用，在上海多少工资_百度知道
重点本科 ，一年web前端工作经验 div+css 切图，js ，以及jquery，以及 ajax都熟练应用，在上海多少工资
有过一个大型项目经验
我有更好的答案
说真的，这个关键是看你的设计作品，你说的这些都比较普通，而且你是重点本科也好像没太大的优势，就是基本上人人都能学会的，说不定比你更精通，从你的提问我大概猜测你是做页面设计，主要是前端的，你有没有发现现在的网站都是仿来仿去，页面的创新设计个人觉得是比较重要的一部分之前我和一个上海外贸公司的老板聊过，她说给毕业生就1500，外地的去就包住以上都是我的个人见解，或者存在着不对的地方，但是希望对你还是有帮助
采纳率：44%
大概之间。如果你自己有美工基础，又有前端基础，会高些。
又一个可怜的代码工人
我有3个项目的经验掌握你说的那些所有技术,还会java，还会使用企业级架构SSH还会搭建jsp和php环境，包括在linux上的还会sqlserver oralc Mysql 现在拿着每月1300的工资欢乐着
你吓死我了，那你傻啊
你已经回答了你自己的问题你自己的价格不是别人帮你评定的 谢谢
发个作品我帮你审一下，我下面带的设计师待遇在20到40万
其他2条回答
为您推荐：
其他类似问题
您可能关注的内容
jquery的相关知识
换一换
回答问题，赢新手礼包
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。JS和jQuery哪个重要，应该先学哪个JS和jQuery哪个重要，应该先学哪个百度经验百家号在技术论坛如（CSDN等）经常看到有这样类似的提问，当然提出这样问题的通常都是新手为了解决大家的疑惑，同时帮助新手程序员能更快掌握学习的方向，不致于弄错重点，笔者以自己身学习和使用经验分享给大家，有任何问题或疑惑，欢迎留言在回答题目问题前，首先大家需要了解下什么是js，什么是jQueryjs，即JavaScript在1995年时，由Netscape公司的Brendan Eich，在网景导航者浏览器上首次设计实现而成。因为Netscape与Sun合作，Netscape管理层希望它外观看起来像Java，因此取名为JavaScriptJavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型jQueryjQuery是一个兼容多浏览器的javascript库，核心理念是write less,do more(写得更少,做得更多)通过上面的简单介绍，想必大家已经知道了最重要的一点，即：jQuery是一个javascript库；那么不用笔者强调，大家应该都知道js和jQuery哪个更重要，先学哪个其实只要学好了javascript，使用jquery将不会有什么问题依笔者经验，新手程序员必须花时间重点学习一下javascript；至于jQuery可以直接在使用时参考jQuery参考文档，不需花太多时间在上面，当然如果读者时间充裕，也可以学习下jQuery源码，一边更好的了解jquery实现原理如何学习javascript：1、看书推荐书籍：《javascript高级编程》《javascript设计模式》2、多练作为一门技术，只有勤加练习，才能提高的快本文由百家号作者上传并发布，百家号仅提供信息发布平台。文章仅代表作者个人观点，不代表百度立场。未经作者许可，不得转载。百度经验百家号最近更新：简介:解决你所有的生活难题作者最新文章相关文章初学Jquery easyui后台框架基础所了解的知识和注意要点
首先Jquery easyui是基于jquery语法所写的UI插件的一个集合体，他的创造是为了帮助web程序开发者提供优美并且功能性强的UI页面，开发者不用写复杂的javascript脚本定义过多的css样式，只需要添加相应的html标签即可实现想达到的界面和功能，简单方便值得拥有。
下面就来说一下具体用法，第一Jquery easyui肯定要引用easyui的一些css样式和脚本来支持，比如
themes/default/easyui.css
themes/icon.css
jquery.min.js
jquery.easyui.min.js最常见的这些就可以实现大多的页面，接着写一些常用标签及用法，
想要添加按钮功能，就需要添加class="easyui_linkbutton",
添加div，&div id="p" class="easyui-panel" style="设计样式"&d，&p
style="font-size:14px(字体大小)"&点击事件写onclick="javascript:$("#P（p为段落）").panel('open')"这里以打开段落举例。
再来说几个方法：面板载入内容
&div id="p" class="easyui-panel" style=""
data-options="
iconCls:'icon-reload',
handler:function(){
$('p').panel('refresh','_content.html');
"&&/div& 面板的嵌套：
&div class="easyui-panel" title="" style=""&
&div class="easyui-layout" ata-options="fit:true"&
&div data-options="region:'west',split:true" style=""&
这是左面嵌套内容
&/div& 选项卡：
&div class="easyui-tabs" style=""
&div title="About" style=""&
&div title="lll" style=""&
添加选项卡：
function addTab(subtitle,url){ if(!$('#tabs').tabs('exists',subtitle)){
$('#tabs').tabs('add',{
title:subtitle,
content:createFrame(url),
closable:true
}); }else{
$('#tabs').tabs('select',subtitle);
//$('#mm-tabupdate').click(); }
目前学到这些，还有很多功能方法，学习后再写博客和各位老司机探讨一下
下面放一张唯美图镇楼。。
没有更多推荐了，