前面的话

  jQuery动画可以使用fade、hide、slide等方法实现基本动画效果,可以使用animate实现自定义动画,甚至可以使用queue实现动画队列。但是,却缺少了对动画控制的介绍。动画产生后,描述动画状态、进行动画延迟、操作动画暂停等都是很重要的功能。本文将详细介绍jQuery动画控制

动画状态

  当用户快速在某个元素多次执行动画时,会造成动画累积的现象。这时,就需要引入动画状态这个概念。判断元素是否处于动画状态中,如果处于,则不添加新动画

is(':animated')

  使用is(':animated')方法来判断元素是否处于动画状态

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<button id="btn1">按钮一</button>
<button id="btn2">按钮二</button>
<button id="reset">恢复</button>
<div id="box" style="position:relative;height: 100px;width: 300px;background-color: lightblue"></div>
<script>
$('#reset').click(function(){
history.go();
})
$('#btn1').click(function(event){
$('#box').animate({'left':'+=100px'});
});
$('#btn2').click(function(event){
if(!$('#box').is(':animated')){
$('#box').animate({'left':'+=100px'});
}
});
</script>

停止动画

【stop()】

  stop()方法用于停止匹配元素当前正在运行的动画

stop([queue][,clearQueue][,jumpToEnd])

  stop()方法可以接受3个可选参数,第一个参数queue表示停止动画队列的名称;第二个参数clearQueue表示是否清空队列中的动画,默认值为false;第三个参数jumpToEnd表示是否当前动画立即完成,默认值为false

【1】当stop()方法不接受任何参数时,将立刻停止当前动画

  对于hover动画效果来说,经常出现用户把光标移入元素时出发触发动画效果,但当前动画没有结束时,用户已经将光标移出元素。这样移入移出过快会导致动画效果延迟

  此时,只要在光标移入、移出动画之前加入stop()方法就可以结束当前动画,并立即执行队列中下一个动画

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<button id="reset">恢复</button>
<div id="box" style="position:relative;height: 100px;width: 300px;background-color: lightblue">未设置stop的hover动画效果</div>
<div id="box1" style="position:relative;height: 100px;width: 300px;background-color: lightgreen">设置stop的hover动画效果</div>
<script>
$('#reset').click(function(){
history.go();
})
$('#box').hover(function(event){
$(this).animate({'width':'400px'})
},function(){
$(this).animate({'width':'300px'})
});
$('#box1').hover(function(event){
$(this).stop().animate({'width':'400px'})
},function(){
$(this).stop().animate({'width':'300px'})
});
</script>

【2】stop()参数clearQueue表示是否清空队列中的动画,默认值为false

  当设置该参数为true时,则不仅停止当前动画,而且会清空队列中动画

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<button id="btn">开始动画</button>
<button id="btn1">停止当前动画</button>
<button id="btn2">停止当前及后续动画</button>
<button id="reset">恢复</button>
<div id="box" style="position:relative;height: 100px;width: 300px;background-color: lightblue"></div>
<script>
$('#reset').click(function(){
history.go();
})
$('#btn').click(function(event){
$('#box').animate({'left':'100px'},1000).animate({'width':'200px'},1000);
$('#box').animate({'left':'0'},1000).animate({'width':'100px'},1000);
});
$('#btn1').click(function(event){
$('#box').stop();
})
$('#btn2').click(function(event){
$('#box').stop(true);
})
</script>

【3】stop()参数jumpToEnd表示是否当前动画立即完成,默认值为false

  当该参数设置为true时,当前动画立即完成

  stop()相当于stop(false,false)表示停止执行当前动画,后续动画接着进行

  stop(true,false)表示停止执行当前动画,后续动画不再进行

  stop(false,true)表示当前动画立即完成,后续动画接着进行

  stop(true,true)表示当前动画立即完成,后续动画不再进行

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<input id="btn" type="button" value="开始动画">
<button>stop()</button>
<button>stop(true,false)</button>
<button>stop(false,true)</button>
<button>stop(true,true)</button>
<input id="reset" type="button" value="恢复">
<div id="box" style="position:relative;height: 100px;width: 300px;background-color: lightblue"></div>
<script>
$('#reset').click(function(){
history.go();
})
$('#btn').click(function(event){
$('#box').animate({'left':'100px'},1000).animate({'width':'200px'},1000);
$('#box').animate({'left':'0'},1000).animate({'width':'100px'},1000);
});
$('button').click(function(event){
jQuery.globalEval("$('#box')." + $(this).html());
})
</script>

【finish()】

  finish()方法是另一种停止动画的方法,它可以停止当前正在运行的动画,删除所有排队的动画,并完成匹配元素所有的动画

finish([queue])

  finish()方法可以接受一个可选参数queue表示停止动画队列的名称

  finish()方法和stop(true,true)很相似,stop(true,true)将清除队列,并且目前的动画跳转到其最终值。但是,不同的是,finish()会导致所有排队的动画的CSS属性跳转到他们的最终值

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<input id="btn" type="button" value="开始动画">
<button>finish()</button>
<button>stop(true,true)</button>
<input id="reset" type="button" value="恢复">
<div id="box" style="position:relative;height: 100px;width: 300px;background-color: lightblue"></div>
<script>
$('#reset').click(function(){
history.go();
})
$('#btn').click(function(event){
$('#box').animate({'left':'100px'},1000).animate({'width':'200px'},1000);
$('#box').animate({'left':'0'},1000).animate({'width':'100px'},1000);
});
$('button').click(function(event){
jQuery.globalEval("$('#box')." + $(this).html());
})
</script>

动画延迟

  delay()方法可以用来设置一个延时来推迟执行队列中后续的项

delay(duration[,queueName])

  duration是delay()方法的必须参数,用于设定下个队列推迟执行的时间,持续时间是以毫秒为单位的,默认值为'normal',代码400毫秒的延时;'fast'和'slow'分别代表200和600毫秒的延时

  queueName是delay()方法的可选参数,它是一个队列名的字符串,默认是动画队列fx

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<button id="btn1">开始动画</button>
<button id="reset">恢复</button>
<div id="box" style="position:relative;height: 100px;width: 300px;background-color: lightblue"></div>
<script>
$('#reset').click(function(){
history.go();
})
$('#btn1').click(function(event){
$('#box').animate({'left':'300px'}).delay(500).animate({'width':'100px'});
});
</script>

全局控制

【jQuery.fx.off】

  jQuery.fx.off属性可以用来对jQuery动画进行全局控制,默认为undefined,当这个属性设置为true的时候,调用时所有动画方法将立即设置元素为他们的最终状态,而不是显示效果

  当然,动画可以通过设置这个属性为false重新打开

  [注意]由于该属性是全局性的,因此在没有动画正在运行或停止所有动画时,此属性的变化才能生效

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<button id="btn1">开始动画</button>
<button id="btn2">开闭动画</button>
<button id="reset">恢复</button>
<div id="box" style="position:relative;height: 100px;width: 300px;background-color: lightblue"></div>
<script>
$('#reset').click(function(){
history.go();
})
$('#btn1').click(function(event){
$('#box').animate({'left':'300px'},1000).animate({'width':'100px'},1000);
});
$('#btn2').click(function(){
$.fx.off = !$.fx.off;
});
</script>

【jQuery.fx.interval】

  jQuery.fx.interval属性可以改变动画的频率,以毫秒为单位

  这个属性可以设置动画每秒运行帧数,默认是13毫秒。该属性值越小,在速度较快的浏览器中,动画执行的越流畅,但是会影响程序的性能并且占用更多的CPU资源

  [注意]由于该属性是全局性的,因此在没有动画正在运行或停止所有动画时,此属性的变化才能生效

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<button id="btn1">开始动画</button>
<button id="btn2">改变动画频率</button>
<button id="reset">恢复</button>
<div id="box" style="position:relative;height: 100px;width: 300px;background-color: lightblue"></div>
<script>
$('#reset').click(function(){
history.go();
})
$('#btn1').click(function(event){
$('#box').animate({'left':'300px'},1000).animate({'width':'100px'},1000);
});
$('#btn2').click(function(){
$.fx.interval = 100;
});
</script>

深入学习jQuery动画控制的更多相关文章

  1. jquery动画控制非css属性

    JQuery的animate()方法可以通过渐变的更改CSS属性来实现简单的动画效果, 比如 $("#box").animate({height:"300px" ...

  2. 深入学习jQuery动画队列

    前面的话 队列实现是jQuery非常棒的一个拓展,使用动画队列可以使动画更容易实现.本文将详细介绍jQuery动画队列 queue() queue()方法用来显示在匹配的元素上的已经执行的函数队列 q ...

  3. jQuery 动画效果 与 动画队列

    基础效果 .hide([duration ] [,easing ] [,complete ]) 用于隐藏元素,没有参数的时候等同于直接设置 display 属性 $('.target').hide() ...

  4. 深入学习jQuery自定义动画

    × 目录 [1]属性对象 [2]可选参数 [3]选项参数 前面的话 很多情况下,前面介绍的jQuery动画的简单效果无法满足用户的各种需求,那么就需要对动画有更多的限制,需要采取一些高级的自定义动画来 ...

  5. 深入学习jQuery的三种常见动画效果

    × 目录 [1]显隐效果 [2]高度变化 [3]淡入淡出 前面的话 动画效果是jQuery吸引人的地方.通过jQuery的动画方法,能够轻松地为网页添加视觉效果,给用户一种全新的体验.jQuery动画 ...

  6. jquery动画切换引擎插件 Velocity.js 学习01

    一.Velocity.js介绍 Velocity是一个jQuery插件,重新实现了$.animate() 来产生更高的性能(速度也比CSS动画库更快),而包括新的功能,以提高动画工作流程. Veloc ...

  7. jQuery动画与特效详解

    本文主要是讲解和学习jQuery的自动显隐,渐入渐出等. 1.显示和隐藏hide()和show() 对于动画来说,显示和隐藏是最基本的效果之一,本节简单介绍jQuery的显示和隐藏. 代码如下: &l ...

  8. 从零开始学习jQuery (五) 事件与事件对象

    本系列文章导航 从零开始学习jQuery (五) 事件与事件对象 一.摘要 事件是脚本编程的灵魂. 所以本章内容也是jQuery学习的重点. 本文将对jQuery中的事件处理以及事件对象进行详细的讲解 ...

  9. 从零开始学习jQuery (一) 入门篇

    本系列文章导航 从零开始学习jQuery (一) 入门篇 一.摘要 本系列文章将带您进入jQuery的精彩世界, 其中有很多作者具体的使用经验和解决方案,  即使你会使用jQuery也能在阅读中发现些 ...

随机推荐

  1. Attention:本博客暂停更新

    Attention:本博客暂停更新 2016年11月17日08:33:09 博主遗产 http://www.cnblogs.com/radiumlrb/p/6033107.html Dans cett ...

  2. 洛谷 P1827 美国血统 American Heritage Label:字符串Water

    题目描述 农夫约翰非常认真地对待他的奶牛们的血统.然而他不是一个真正优秀的记帐员.他把他的奶牛 们的家谱作成二叉树,并且把二叉树以更线性的“树的中序遍历”和“树的前序遍历”的符号加以记录而 不是用图形 ...

  3. Exchange环境搭建心得

    不知道是思维模式的问题,还是智商不够用,从3月1日开始准备自学Exchange,到今天还是有好多东西稀里糊涂的.不说别的,就搭建环境,前期的报错折腾了好一阵.现在回顾一下,用Server08R2,一台 ...

  4. Java_位运算(移位、位与、或、异或、非)

    public class Test { public static void main(String[] args) { // 1.左移( << ) // 0000 0000 0000 0 ...

  5. Linux下Nano命令使用指南

    1.什么时候用nano? 一般网络很卡,ssh时一用vim/vi 就死窗口,或者死机的情况 2.如何使用?   打开或新建文件 #nano 文件名    禁用自动换行 #nano -w /etc/fs ...

  6. JavaScript数组去重的几种方法

    这个老问题,网上普遍都有了,为什么要再写一遍呢,主要是为了记个笔记... 遍历时搜索结果数组 思路很明确,如下 新建一个数组存放结果 循环遍历原数组,对于每一个元素,在结果数组中搜索是否存在 若不存在 ...

  7. dictionary 应用(绑定dgv)

    dictionary的用法://初始化添加所有车位进这队列 Utility.Effectlist.Add(); //每触发一次,用这个增加数量 Utility.Effectlist["Car ...

  8. 深入理解Spark(一):Spark核心概念RDD

    RDD全称叫做弹性分布式数据集(Resilient Distributed Datasets),它是一种分布式的内存抽象,表示一个只读的记录分区的集合,它只能通过其他RDD转换而创建,为此,RDD支持 ...

  9. apache rewrite_mod 经典疑问解答

    1.RewriteRule ^(com\/.*)$ index.php?do=$1 问:上面的规则匹配表达式 "^(.*)$" 匹配的内容是什么 答:匹配内容是URI站点目录:/d ...

  10. Linux tar文件打包

    tar格式,会打包成一个文件,可以对多个目录,或者多个文件进行打包 tar命令只是打包,不会压缩,打包前后大小是一样的 tar命令 -c    //打包 -x    //解压 -f    //指定文件 ...