4.2 《锋利的jQuery》jQuery中的动画
问题：queue()方法？
tip0:
jquery从1.9版本以上就不支持toggle()方法。
// $("#panel h5.head").toggle(function(){
// ...
// },function(){
// ...
// });
以上不支持！以下支持
// $("#panel h5.head").click(function(){
// $(this).next().toggle();
// });
tip1:
用jquery做动画效果要求在标准模式下，否则可能会引起动画抖动。标准模式即要求文件头部包含如下的DTD定义：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
tip2:
jquery 中的任何动画效果，都可以指定3种速度参数“slow”，“normal”，“fast”时长分别是”0.6秒“0.4秒”“”0.2秒“，当使用速度关 键字时要加引号，例如show("slow")，如果用数字则不需要引号，例如show(1000);即（1000毫秒）1秒钟内显示。
tip3:
callback回调函数适用于jquery所有动画效果方法，例如
$("#element").slideDown("normal",function(){
//在效果完成后做其他事情
})
tip4：
判断是否处于动画状态
if(!$("#element").is(":animated")){
// 如果当前没有进行动画，则添加新动画
}
tip5:
（1）一组元素上的动画效果
当在一个animate()方法中应用多个属性时，动画是同时发生的。
当以链式的写法应用动画方法时，动画是按顺序发生的（除非queue选项值为false）
（2）多组元素上的动画效果
默认情况下，动画都是同时发生的。
当以回调的形式应用动画方式时（包括动画的回调函数和queue()方法的回调函数），动画是按照回调顺序发生的
注意：在动画方法中，其他非动画方法会插队，例如css()方法要使非动画方法也按照顺序执行，需要把这些方法写在动画方法的回调函数中或者queue()方法中。
这个判断方法在animate()动画中经常用到，需要特别注意。避免动画积累而导致的动画与用户的行为不一致。
1、show()和hide()
①注意hide()方法在将“内容”的display属性值设置为"none"之前，会记住原先的display属性值。当调用show()方法时，就会根据hide()方法记住的display属性值来显示元素。
③同时改变”内容“的高度、宽度和不透明度。
$("#panel h5.head").toggle(function(){
$(this).next().hide(600);
},function(){
$(this).next().show(600);
})
2、fadeIn()和fadeOut()
只改变元素的不透明度。
3、slideUp()和slideDown()
只改变元素的高度。
4、animate()自定义动画
#panel{
position: relative;
width:100px;
height: 100px;
border: 1px solid #0050d0;
background:#96e555;
cursor: pointer;
}
注意：定义relative
①简单的动画
$("#panel").click(function(){
$(this).animate({left:"500px"},300);
})
②累加、累减
$("#panel").click(function(){
$(this).animate({left:"+=500px"},300);
})
③多重动画
$("#panel").click(function(){
$(this).animate({left:"500px",height:"200px"},300);
})
④按顺序执行（推荐链式写法）
$("#panel").click(function(){
// $(this).animate({left:"500px"},300);
// $(this).animate({height:"200px"},3000);
$(this).animate({left:"500px"},300)
.animate({height:"200px"},3000);
})
⑤综合动画
$("#panel").css("opacity","0.5"); //设置不透明度
$("#panel").click(function(){
$(this).animate({left:"400px",height:"200px",opacity:"1"},3000) //①
.animate({top:"200px",width:"200px"},3000) //②
.fadeOut("slow"); //③
// .css("border","5px solid blue"); //④
// ③是在②之后执行(只有是动画才加入到队列)，但若改为④，css()方法并不会加入到动画队列中，而是立即执行。
// 想要css()加入队列，只要使用回调函数。
// .animate({top:"200px",width:"200px"},3000,function(){
// $(this).css("border","5px solid blue");
// })
})
5、stop()停止动画
stop([clearQueue],[gotoEnd])
注意：两个参数Boolean值（ture或false）。clearQueue代表是否要清空未执行完的动画队列，gotoEnd代表是否将正在执行的动画跳转到末状态。
如果是直接使用stop()方法，则会立即停止当前正在进行的动画，如果接下来还有动画等待继续进行，则以当前状态开始接下来的动画。
$("#panel").hover(function(){
$(this).stop()
.animate({height:"150"},2000) //① 如果在此时触发了光标移除事件。stop()是立即停止①执行②③④；stop(true)是立即停止①清空②执行③④
//stop(false,true)是立即跳到①的结束状态，并执行②③④；stop(true,true)是立即跳到①的结束状态清空②执行③④
.animate({width:"300"},3000); //②
},function(){
$(this).stop()
.animate({height:"22"},2000) //③
.animate({width:"60"},3000); //④
})
注意：jquery只能设置正在执行的动画的最终状态，而没有提供直接到达未执行动画队列最终状态的方法。
6、delay()延迟动画
$("#panel").css("opacity","0.5");
$("#panel").click(function(){
$(this).animate({left:"400px",height:"200px",opacity:"1"},3000)//①
.delay(1000) //执行完①后等待1s再执行②
.animate({top:"200px",width:"200px"},3000) //②
.delay(2000) //执行完②后等待2s再执行③
.fadeOut("slow"); //③
})
7、其它动画方法
toggle(speed,[callback]);
slideToggle(speed,[easing],[callback]); //改变高度
fadeToggle(speed,[easing],[callback]); //改变透明度
fadeTo(speed,opacity,[callback]);
$("#panel h5.head").click(function(){
$(this).next().toggle();
});
// 相当于
// $("#panel h5.head").toggle(function(){
// $(this).next().hide();
// },function(){
// $(this).next().show();
// });
$("#panel h5.head").click(function(){
$(this).next().slideToggle();
});
// 相当于
// $("#panel h5.head").toggle(function(){
// $(this).next().slideUp();
// },function(){
// $(this).next().slideDown();
// });
$("#panel h5.head").click(function(){
$(this).next().fadeToggle();
});
// 相当于
// $("#panel h5.head").toggle(function(){
// $(this).next().fadeOut();
// },function(){
// $(this).next().fadeIn();
// });
$("#panel h5.head").click(function(){
$(this).next().fadeTo(600,0.2);
})
图片滚动效果实例：
.v_show { width: 560px; border: 1px solid #dcdcdc; }
.v_caption { background-color: #dcdcdc; padding: 0 10px; }
.v_caption .highlight_tip { padding: 0 20px; }
.v_caption .highlight_tip span { padding: 0 5px; }
.v_caption .highlight_tip .current { color: red; }
.v_content { position: relative; width: 560px; height: 180px; }
.v_content .v_content_list { position: absolute; left:; right:; }
.v_content .v_content_list li { float: left; padding: 10px; }
<div class="fz">
<div class="v_show">
<div class="v_caption fix lh40">
<h2 class="l fz14">卡通动漫</h2>
<div class="highlight_tip l">
<span class="current">1</span><span>2</span><span>3</span>
</div>
<div class="l">
<span class="prev">上一页</span>
<span class="next">下一页</span>
</div>
<em class="r"><a href="#">更多</a> </em>
</div>
<div class="v_content ovh">
<div class="v_content_list">
<ul class="fix">
<li><a href="#"><img src="data:images/xxx.jpg" width="120" height="120"> </a>
<h3><a href="#">海贼王1</a></h3>
<span>播放：<em>57,865</em></span>
</li>
<li><a href="#"><img src="data:images/xxx.jpg" width="120" height="120"> </a>
<h3><a href="#">海贼王2</a></h3>
<span>播放：<em>57,865</em></span>
</li>
<li><a href="#"><img src="data:images/xxx.jpg" width="120" height="120"> </a>
<h3><a href="#">海贼王3</a></h3>
<span>播放：<em>57,865</em></span>
</li>
<li><a href="#"><img src="data:images/xxx.jpg" width="120" height="120"> </a>
<h3><a href="#">海贼王4</a></h3>
<span>播放：<em>57,865</em></span>
</li>
<li><a href="#"><img src="data:images/xxx.jpg" width="120" height="120"> </a>
<h3><a href="#">海贼王5</a></h3>
<span>播放：<em>57,865</em></span>
</li>
<li><a href="#"><img src="data:images/xxx.jpg" width="120" height="120"> </a>
<h3><a href="#">海贼王6</a></h3>
<span>播放：<em>57,865</em></span>
</li>
<li><a href="#"><img src="data:images/xxx.jpg" width="120" height="120"> </a>
<h3><a href="#">海贼王7</a></h3>
<span>播放：<em>57,865</em></span>
</li>
<li><a href="#"><img src="data:images/xxx.jpg" width="120" height="120"> </a>
<h3><a href="#">海贼王8</a></h3>
<span>播放：<em>57,865</em></span>
</li>
<li><a href="#"><img src="data:images/xxx.jpg" width="120" height="120"> </a>
<h3><a href="#">海贼王9</a></h3>
<span>播放：<em>57,865</em></span>
</li>
</ul>
</div>
</div>
</div>
</div>
<script>
$(function () {
var page = 1;
var i = 4;
var $parent = $("div.v_show");
var $v_show = $parent.find("div.v_content_list");
var $v_content = $parent.find("div.v_content");
var v_width = $v_content.width();
var len = $v_show.find("li").length;
var page_count = Math.ceil(len / i);
//下一页
$("span.next").click(function () {
if (!$v_show.is(":animated")) {
if (page == page_count) {
$v_show.animate({left: "0px"}, "slow");
page = 1;
}
else {
$v_show.animate({left: '-=' + v_width}, "slow");
page++;
}
$parent.find("span").eq(page - 1).addClass("current").siblings().removeClass("current");
}
});
//上一页
$("span.prev").click(function () {
if (!$v_show.is(":animated")) {
if (page == 1) {
$v_show.animate({left: '-='+v_width*(page_count-1)}, "slow");
page = page_count;
}
else {
$v_show.animate({left: '+=' + v_width}, "slow");
page--;
}
$parent.find("span").eq(page - 1).addClass("current").siblings().removeClass("current");
}
});
});
</script>
4.2 《锋利的jQuery》jQuery中的动画的更多相关文章
- 《锋利的JQuery》中的动画效果：
说实话,虽然这本书已经很老了,老到什么程度呢,这本书以JQuery1.9以前的版本写就的,toggle()方法的(func1,func2,...)这个切换事件的功能已经被删去了 但是这本书还是挺8错的 ...
- 锋利的jQuery ——jQuery中的DOM操作（三）
一.DOM的操作分类 1>DOM Core 2>HTML-DOM 3>CSS-DOM 二.jQuery中的DOM操作 DOM树 ①查找节点 1)查找元素节点 利用jQuery ...
- 第五章 jQuery中的动画
通过jQuery中的动画方法,能轻松地为网页添加精彩的视觉效果,给用户一种全新体验. 1.show()方法和hide()方法 该方法的功能与css()方法设置display属性效果相同. 给show( ...
- jQuery插件中的this指的是什么
在jQuery插件的范围里, this关键字代表了这个插件将要执行的jQuery对象, 但是在其他包含callback的jQuery函数中,this关键字代表了原生的DOM元素.这常常会导致开发者误将 ...
- 详解jquery插件中;(function ( $, window, document, undefined )的作用
在jquery插件中我们经常看到以下这段代码 1 2 3 ;(function ( $, window, document, undefined ){ //函数体内具体代码 })(jQuery, wi ...
- JQuery mobile中按钮自定义属性的改变
1..ui-mobile-viewport是jquery mobile默认给body加的class,这样的话包含选择符优先级高一点 <style> .ui-mobile-viewport ...
- jQuery学习笔记（四）jQuery中的动画
目录 show()方法和hide()方法 fideIn()方法和fadeOut()方法 slideUp方法和slideDown()方法 自定义动画方法animate toogle(),slideTog ...
- jQuery Mobile 中创建按钮
在 jQuery Mobile 中创建按钮 jQuery Mobile 中的按钮可通过三种方法创建: 使用 <button> 元素 使用 <input> 元素 使用 data- ...
- prototype.js 和 jQuery.js中 ajax 的使用
这次还是prototype.js 和 jQuery.js冲突的问题,前面说到过解决办法http://www.cnblogs.com/Joanna-Yan/p/4836252.html,以及上网说的大部 ...
- jquery.cookie中的操作
http://w3school.com.cn/js/js_cookies.asp jquery.cookie中的操作: jquery.cookie.js是一个基于jquery的插件,点击下载! 创建一 ...
随机推荐
- 2017.2.12 开涛shiro教程-第七章-与Web集成
2017.2.9 开涛shiro教程-第七章-与Web集成(一) 原博客地址:http://jinnianshilongnian.iteye.com/blog/2018398 根据下载的pdf学习. ...
- SSO单点登录系列1:cas客户端源码分析cas-client-java-2.1.1.jar
落雨 cas 单点登录 希望能给以后来研究cas的兄弟留下一点思路,也算是研究了两天的成果,外国人的代码写的很晦涩,翻译下来也没有时间继续跟进,所以有错误的还请大家跟帖和我讨论,qq 39426378 ...
- mongodb分片片键的选择(持续更新中)
首先要了解项目的情况,检查使用情况 对集合进行分片时,要选择一个或者两个字段拆分数据,这个键叫做片键 一旦拥有对个分片,在修改片键几乎是不肯能的事情,因此选择合适的片键是非常重要的. 对集合分片之前要 ...
- 通用礼品卡接口文档（KFC、必胜客、GAP等）
通用礼品卡接口文档,集于各商家(KFC.必胜客.GAP等)实体卡和会员卡的API虚拟卡,可用于线上/下消费.移动支付. 1.API 1.1商品列表 接口地址:http://v.juhe.cn/gift ...
- OLR
OLR:Oracle Local Registry 环境:11.2.0.3 RAC RHEL6.5 It contains local node specific configuration re ...
- p90x 涵盖了全部方式的健身方式美国经典训练DVD
http://baike.baidu.com/view/2602721.htm p90x是美国经典训练DVD, 涵盖了全部方式的健身方式13张Beachbody P90X DVD全集,90天魔鬼训练 ...
- 一种把dll放在不同目录的巧妙方法
想必C#的开发者都遇到过这个问题,引用的dll都放在根目录下,随着项目的日益增大,根目录下充满了各种各样的dll,非常的不美观. 如果能够把dll按照想要的目录来存放,那么系统就美观多了,以下是我常用 ...
- 《UNIX环境高级编程》读书笔记 —— 文件 I/O
打开或创建一个文件 #include <fcntl.h> int open(const char *pathname, int oflag, .../*mode_t mode*/); ...
- 读懂JVM垃圾收集日志
JVM垃圾收集搞懂原理很重要,但是连垃圾收集的日志都不懂,这tmd还分析个屁的问题啊,典型的空有理论知识,动手实践为零.本篇就来具体的学习一下JVM中的垃圾收集日志. 第一步,垃圾收集的选项 图1 J ...
- uboot之run_command简单分析
本文档简单分析了uboot中命令的实现.run_command函数的实现以及从uboot命令行接收并处理命令的过程. 作者: 彭东林 邮箱: pengdonglin137@163.com http:/ ...