第4章 jQuery的事件和动画(二)
二. jQuery中的动画
动画在前面几章案例中是回避不了的问题。此处结合一些简便的写法稍作系统的分析。
1. show()和hide()
(1)介绍——不用过多的介绍了
jQuery最基本的方法。本质是某个html对象的display从none和显示之间切换的丰富过程。在display为none之前,jq会记住原来对象的显示方式。原来是inline,再次调用show()方法时,显示方式不变。
回到例4.1中FAQ的例子——(运行环境jQuery1.7.2)
- $(document).ready(function(){
- $('#panel h5.head').bind('click',function({
- $('#panel h5.head').toggle(function(){
- $(this).next().hide();
- },function(){
- $(this).next().show();
- })
- })
- })
- $(document).ready(function(){
- var bShow=false;
- $('#panel h5.head').bind('click',function({
- if(bShow){
- $(this).next().hide();
- }else{
- $(this).next().show()
- }
- bShow=!bShow;
- })
- })

可以发现,该例子中的宽、高、不透明度都是变化的。display:none只是函数的终点。
2.fadeIn()和fadeOut()
只改变不透明度,相关元素的节点都存在。
jq1
- $(document).ready(function(){
- $('#panel h5.head').click(function(){
- $(this).next().fadeToggle();
- })
- })
jq2
- $(document).ready(function(){
- $('#panel h5.head').bind('click',function(){
- if($(this).next().is(':visible')){
- $(this).next().fadeOut();
- }else{
- $(this).next().fadeIn();
- }
- })
- })
- $(document).ready(function(){
- $('#panel h5.head').click(function(){
- $(this).next().fadeToggle(600,0.2);
- })
- })
3. slideDown()和slideUp()
slideDown()元素由上至下显示。slideUp()正好相反。以下两段代码都可以替代toggle()使用
jq1
- $(document).ready(function(){
- $('#panel h5.head').click(function(){
- $(this).next().slideToggle();
- })
- })
- $(document).ready(function(){
- $('#panel h5.head').bind('click',function(){
- if($(this).next().is(':visible')){
- $(this).next().slideUp();
- }else{
- $(this).next().slideDown();
- }
- })
- })
4.参数
以上三类函数都可以用一套参数。
不带任何参数时,显示方式是马上变化。
fast——200ms显示
normal——400ms显示
slow——600ms显示
也可以直接写数字,比如show(300)表示在300ms内显示完毕。
【小结】可以认为show-hide方法是fadeIn-fadeOut(改变透明度)和slideUp-slideDown(改变高度)的综合。它既改变又改变透明度。
5.自定义动画方法——animate()
- animate(params,speed,callback)
(1)自定义一个简单的动画吧
【例4.2】一个空白文档, 一个div被单击后能在页面横向飘动。
- <divid="div1"></div>
- *{margin:0;padding:0}
- #div1{
- width:100px;height:100px;
- background: red;
- position: absolute;
- margin:20px;
- }
- $(function(){
- $('#div1').click(function(){
- alert($(this).attr('left'))
- $(this).animate({left:500+'px'},3000);//3s内移动到左距离500px处
- });
- });
(2)累加累减
上面的案例套用原生js分析,运动就是#div1的offsetLeft不断增加的过程。代码{left:500+'px'}提示了运动的终点是500px处,但当定位不同时,运动的距离不一样。有时候我们不知道自己身在何处,只知道最终前进的方向和距离。这时适用于累加累减动画
- $(function(){
- $('#div1').click(function(){
- $(this).animate({left:'+=500px'},3000);//3s内向右移动500px
- });
- });
(3)再复杂一点点
- $(function(){
- $('#div1').click(function(){
- $(this).animate({left:'+=500px',width:'200px'},3000);//3s内向右移动500px
- });
- });

(4)还不够
- $(function(){
- $('#div1').click(function(){
- $(this).animate({left:'500px',width:'200px'},3000);//第一个动画
- $(this).animate({left:'600px',width:'100px'},1000);//接下来发生的动画
- }
- );
- });
(5)综合运用
- $(function(){
- $('#div1').click(function(){
- $(this).animate({left:'500px',width:'200px',opacity:'1'},3000)
- .animate({left:'600px',width:'100px'},1000)
- .animate({top:'500px',height:'200px'},3000)
- .animate({top:'600px',height:'100px'},1000)
- .fadeOut(600);
- });
- });
6.动画回调函数
- $(function(){
- $('#div1').click(function(){
- $(this).animate({left:'500px',width:'200px',opacity:'1'},3000)
- .animate({left:'600px',width:'100px'},1000)
- .animate({top:'500px',height:'200px'},3000)
- .animate({top:'600px',height:'100px'},1000,function(){
- $(this).css('background','green')//回调函数
- })
- });
- });
7.动画控制
- xxx.stop([clearQueue],[gotoEnd]);
- $(function(){
- $('#div1').hover(function(){
- $(this).stop()
- .animate(鼠标移入动画)
- },function(){
- $(this).stop()
- .animate(鼠标移出动画)
- })
- });
(2)动画判断
动画的一个重要原则在于:始终与用户行为一致。不然体验就会出现问题。
又一个简单的场景是:疯狂移入移出导致动画不断叠加,"久久不能平息"。
因此,需要加一个判断模块:
a.当前动画如果已经结束,则可以执行用户触发的又一个动画;
b.当前如果未结束,那就不执行任何动画!
- if(!对象.is(':animated')){
- //如果当前没有进行动画,则在此执行新动画
- }else{...}
- xxx.animate({属性1:'值1',...},动画执行时间).delay(1000)
难点:
(1)首尾如何跳转
(2)注意蓝色的圆点切换
布局
- <divid="cartoon">
- <divclass="header">
- <h4>卡通动漫</h4>
- <ulclass="dot">
- <li></li>
- <li></li>
- <li></li>
- <li></li>
- </ul>
- <divclass="btn">
- <divclass="btn1"></div>
- <divclass="btn2"></div>
- </div>
- <divclass="more"><ahref="javascript:;">更多</a></div>
- </div>
- <ulclass="scroll">
- <li>
- <imgsrc="data:images/01.jpg"/>
- <div>
- <h6><ahref="javascript:;">海贼王</a></h6>
- <p>播放次数:888</p>
- </div>
- </li>
- <li>
- <imgsrc="data:images/01.jpg"/>
- <div>
- <h6><ahref="javascript:;">海贼王</a></h6>
- <p>播放次数:888</p>
- </div>
- </li><li>
- <imgsrc="data:images/01.jpg"/>
- <div>
- <h6><ahref="javascript:;">海贼王</a></h6>
- <p>播放次数:888</p>
- </div>
- </li><li>
- <imgsrc="data:images/01.jpg"/>
- <div>
- <h6><ahref="javascript:;">海贼王</a></h6>
- <p>播放次数:888</p>
- </div>
- </li>
- <li>
- <imgsrc="data:images/02.jpg"/>
- <div>
- <h6><ahref="javascript:;">叮当</a></h6>
- <p>播放次数:889</p>
- </div>
- </li>
- <li>
- <imgsrc="data:images/02.jpg"/>
- <div>
- <h6><ahref="javascript:;">叮当</a></h6>
- <p>播放次数:889</p>
- </div>
- </li>
- <li>
- <imgsrc="data:images/02.jpg"/>
- <div>
- <h6><ahref="javascript:;">叮当</a></h6>
- <p>播放次数:889</p>
- </div>
- </li>
- <li>
- <imgsrc="data:images/02.jpg"/>
- <div>
- <h6><ahref="javascript:;">叮当</a></h6>
- <p>播放次数:889</p>
- </div>
- </li>
- <li>
- <imgsrc="data:images/03.jpg"/>
- <div>
- <h6><ahref="javascript:;">火影</a></h6>
- <p>播放次数:887</p>
- </div>
- </li>
- <li>
- <imgsrc="data:images/03.jpg"/>
- <div>
- <h6><ahref="javascript:;">火影</a></h6>
- <p>播放次数:887</p>
- </div>
- </li>
- <li>
- <imgsrc="data:images/03.jpg"/>
- <div>
- <h6><ahref="javascript:;">火影</a></h6>
- <p>播放次数:887</p>
- </div>
- </li>
- <li>
- <imgsrc="data:images/03.jpg"/>
- <div>
- <h6><ahref="javascript:;">火影</a></h6>
- <p>播放次数:887</p>
- </div>
- </li>
- <li>
- <imgsrc="data:images/04.jpg"/>
- <div>
- <h6><ahref="javascript:;">龙珠</a></h6>
- <p>播放次数:886</p>
- </div>
- </li>
- <li>
- <imgsrc="data:images/04.jpg"/>
- <div>
- <h6><ahref="javascript:;">龙珠</a></h6>
- <p>播放次数:886</p>
- </div>
- </li>
- <li>
- <imgsrc="data:images/04.jpg"/>
- <div>
- <h6><ahref="javascript:;">龙珠</a></h6>
- <p>播放次数:886</p>
- </div>
- </li>
- <li>
- <imgsrc="data:images/04.jpg"/>
- <div>
- <h6><ahref="javascript:;">龙珠</a></h6>
- <p>播放次数:886</p>
- </div>
- </li>
- </ul>
- </div>
css
- *{
- margin:;padding:;
- font-family:"微软雅黑",arial;
- }
- ul li{
- list-style:none;
- }
- a{
- text-decoration: none;
- }
- #cartoon{
- width:596px;height:186px;
- border:1px solid #ccc;
- border-radius:4px4px00;
- margin:100pxauto;
- position: relative;
- overflow: hidden;
- }
- .header{
- height:30px;
- background: linear-gradient(#f2f2f2,#e3e3e3);
- }
- h4{
- width:70px;float: left;
- height:30px;line-height:30px;
- margin-left:12px;
- }
- .dot{
- padding:10px;width:60px;
- float: left;
- }
- .dot>li{
- width:8px;height:8px;
- border-radius:50%;
- background:#04AEF4;
- float: left;margin-right:4px;
- }
- .btn,.more{
- float: left;
- }
- .btn{
- width:57px;height:20px;
- border-radius:2px;
- box-shadow:1px1px3px#999;
- margin-top:5px;
- cursor: pointer;
- }
- .btn1{
- width:29px;height:20px;float: left;
- background: url(../images/btn_cartoon_01.gif)
- }
- .btn2{
- width:28px;height:20px;float: left;
- background: url(../images/btn_cartoon_02.gif)
- }
- .more{
- line-height:30px;margin-left:320px;
- }
- .more a{
- line-height:30px;
- font-style: italic;
- color:#2B93D2;
- }
- #cartoon>ul{
- height:158px;
- position: absolute;
- }
- #cartoon>ul>li{
- float: left;
- padding:10px;
- }
- ul a{
- font-size:12px;
- color:#2B93D2;
- line-height:24px;
- }
- ul a:hover{
- text-decoration: underline;
- color:#E31E1C;
- }
- ul p{
- font-size:12px;
- color:#666;
- line-height:18px;
- }
- $(function(){
- var count=0;
- var aDotLi=document.getElementsByClassName('dot')[0].getElementsByTagName('li');
- //获取原点li
- aDotLi[0].style.background='#04AEF4';
- $('.scroll').css('width',(($('.scroll>li').width()+20)*$('.scroll>li').length)+'px');
- //设置滚动ul的宽度。(设不设置都好像可以。)
- //
- $('#btn1').click(function(){
- if($('.scroll').is(':animated')==true){
- returnfalse;
- }//控制动画模块
- $('.dot>li').css('background','#fff');//初始化原点颜色
- count-=1;
- if(count<0){
- count=count+4;
- }//原点计算规则:0/3/2/1/0/3/2/1......
- $('.scroll').animate({left:-148*4*(count)+'px'},300);
- aDotLi[count].style.background='#04AEF4';
- })
- $('#btn2').click(function(){
- if($('.scroll').is(':animated')==true){
- returnfalse;
- }
- $('.dot>li').css('background','#fff');
- count+=1;
- if(count>3){
- count=0;
- }//计算规则:0/1/2/3/0/1/2/3...
- $('.scroll').animate({left:-148*4*count+'px'},300);
- aDotLi[count].style.background='#04AEF4';
- })
- })
第4章 jQuery的事件和动画(二)的更多相关文章
- 第4章 jQuery的事件和动画(1)——事件篇
jQuery扩展了JavaScript的基本事件处理机制,极大增强了事件处理能力 一. jQuery的事件 1. $(document).ready(function(){})加载方式 再次回到win ...
- Jquery绑定事件及动画效果
Jquery绑定事件及动画效果 本文转载于:https://blog.csdn.net/Day_and_Night_2017/article/details/85799522 绑定事件 bind(ty ...
- jquery实现一些小动画二
jquery实现一些小动画二 jquery实现拖拽功能 <!DOCTYPE html> <html lang="en"> <head> < ...
- 不写完不让回家的JQuery的事件与动画
在这看不见太阳的小黑屋里,苦逼的一天又开始了 好了闲话我也就不扯了,接下来我就来说说我对jQuery事件和动画的理解吧!!! 还是得再扯两句,我们敬爱的,Y老师讲完了,jQuery事件和动画,对着我们 ...
- jQuery中事件与动画
jQuery中的事件与动画 一. jQuery中的事件 jQuery事件是对javaScript事件的封装. 1.基础事件 在javaScript中,常用的基础事件有鼠标事件.键盘事件.windo ...
- jQuery之事件和动画
1.加载DOM $(document).ready(function(){ }) 简写形式: $(function(){ }) 事件绑定: 合成事件 事件冒泡 移除事件 JQuery中的动画 show ...
- jQuery的事件与 动画
什么是事件: 事件的本质是委托. Jquery的 方法: $().css(); $().click(); 等等. 鼠标的事件: 区别在于:mouseover与mouseout再进入或离开后会执行这两个 ...
- jQuery中事件与动画的总结
1.加载DOM 1.1.window事件 window.onload=function(){}.... 时机:其他资源都加载完毕后,再执行 $(function(){}) ……:只是 ...
- jQuery的事件和动画
1.animate的应用 animate(params,[duration],[easing],[callback]) 参数实例: params: {width:"20%" ...
随机推荐
- 任意文件夹下打开cmd功能的设置(win10)
win10中打开cmd的方法: 1."运行"中输入CMD打开,也可以按住win+R 2.选择命令行工具中"开始-->>所有应用-->>Window ...
- Jsoup获取部分页面数据失败 org.jsoup.UnsupportedMimeTypeException: Unhandled content type. Must be text/*, application/xml, or application/xhtml+xml.
用Jsoup在获取一些网站的数据时,起初获取很顺利,但是在访问某浪的数据是Jsoup报错,应该是请求头里面的请求类型(ContextType)不符合要求. 请求代码如下: private static ...
- 【日常笔记】java spring 注解读取文件
获取后缀文件 <!-- 注解读取properties文件开始 @Value("#{configProperties['userPageSize']}")private Str ...
- judge remote file exist
# -*- coding:utf-8 -*- import paramiko,os,sys,time print ''' *****判断远端服务器上的某个文件是否存在***** ''' ip = ra ...
- maven-腾讯SDK(QQ)接口java引入pom配置
maven的pom.xml配置 <dependency> <groupId>net.gplatform</groupId> <artifactId>Sd ...
- C# 不支持关键字: “.;database”。
解决方案分析:这个一定是链接字符串有问题,核对web.config 和程序的字符串是否有误
- 解决Eclipse建立Maven项目后无法建立src/main/java资源文件夹的办法
建立好一个Maven项目后,如果Java Resources资源文件下没有src/main/java文件夹,并且在手动创建这个文件时提示“已存在文件”. 这说明,在这个项目配置中已经有了src/m ...
- 翻滚吧,Spark (错误记录)
1) 本地运行报错: Exception in thread "main" org.apache.spark.SparkException: A master URL must b ...
- 【BZOJ-2502】清理雪道 有上下界的网络流(有下界的最小流)
2502: 清理雪道 Time Limit: 10 Sec Memory Limit: 128 MBSubmit: 594 Solved: 318[Submit][Status][Discuss] ...
- javaScript与MVC
MVC,就是Module,View,Controller分离,使业务逻辑更加清晰,但是现在公司的项目中很多地方那个不是这样的,很多业务逻辑放在了javascript中实现,这样做的优点就是对于技术要求 ...