js进阶 13-6 jquery动画效果相关常用函数有哪些

一、总结

一句话总结：animate()，stop()，finish()，delat()四个。

1、stop()方法的基本用法是什么（stop()当然也可以停止所有的）？

终止当前动画，但是同元素后面的动画会接着执行，比如在队列动画中，终止的话只终止了当前的动画。

30   $('#btn2').click(function(){ 31 //$('#div1').stop() 32 //$('#div1').stop(true) 33  $('#div1').stop(true,true) 34  })

2、stop()方法和finish()方法的区别是什么？

finish():停止所有动画，跳转到动画的最终效果那

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

30   $('#btn2').click(function(){ 31 //$('#div1').stop() 32 //$('#div1').stop(true) 33  $('#div1').stop(true,true) 34  }) 35  $('#btn3').click(function(){ 36  $('#div1').finish() 37  })

3、jquery动画中的延迟函数是哪个？

delay()

38   $('#btn4').click(function(){ 39  $('#div1').animate({left:'500px'},1000) 40  .animate({top:'500px'},1000).delay(1000) 41  .animate({left:'10px'},1000) 42  .animate({top:'100px'},1000) 43  })

二、jquery动画效果相关常用函数有哪些

1、自定义动画

jQuery动画是通过将元素的某一个属性从"一个属性值"在指定时间内平滑地过渡到"另外一个属性值"来实现，原理跟CSS3动画原理是一样的。

animate()方法执行CSS属性集的自定义动画。

语法：animate(params,[speed],[easing],[fn])

参数：params:一组包含作为动画属性和终值的样式属性和及其值的

集合注意：所有指定的属性必须用骆驼形式，比如用marginLeft代替margin-left
stop()方法停止当前正在运行的动画。
语法：$(selector),stop(stopA11,goToEnd)

参数：stopA11 可选。规定是否停止被选元素的所有加入队列的动画。

goToEnd可选。规定是否允许完成当前的动画。该参数只能在设置了stopA11参数时使用。
finish()停止当前正在运行的动画，删除所有排队的动画，并完成匹配元素所有的动画。
finish()方法和stop(true,true)很相似，stop(true,true)将清除队列，并且目前的动画跳转到其最终值。但是，不同的是，finish()会导致所有排队的动画的CSS属性跳转到他们的最终值。
delat()将队列中下一个动画延迟指定的时间后执行。
jQuery.fx.off关闭页面上所有的动画。
jQuery.fx.interval设置动画的显示帧速。默认值为13

2、代码

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <style>
 4 </style>
 5 <head>
 6   <meta charset="UTF-8">
 7   <title>演示文档</title>
 8   <script type="text/javascript" src="jquery-3.1.1.min.js"></script>
 9   <style type="text/css">
10     input{width: 100px;height: 30px;}
11     #div1{width: 100PX;height: 100PX;background: red;position: absolute;left: 10px;top: 100px}
12   </style>
13 </head>
14 <body>
15   <h3>jQuery动画效果</h3>
16   <input id="btn1" type="button" value="animate">
17   <input id="btn2" type="button" value="stop">
18   <input id="btn3" type="button" value="finish">
19   <input id="btn4" type="button" value="delay">
20   <input id="btn5" type="button" value=":animated"><br>
21   <div id="div1">jQuery动画效果</div>
22 <script>
23 //jQuery.fx.off()
24     $('#btn1').click(function(){
25     $('#div1').animate({left:'500px'},1000)
26               .animate({top:'500px'},1000)
27               .animate({left:'10px'},1000)
28               .animate({top:'100px'},1000)
29   })
30   $('#btn2').click(function(){
31     //$('#div1').stop()
32     //$('#div1').stop(true)
33     $('#div1').stop(true,true)
34   })
35   $('#btn3').click(function(){
36     $('#div1').finish()
37   })
38   $('#btn4').click(function(){
39     $('#div1').animate({left:'500px'},1000)
40               .animate({top:'500px'},1000).delay(1000)
41               .animate({left:'10px'},1000)
42               .animate({top:'100px'},1000)
43   })
44   $('#btn5').click(function(){
45     $(':animated').stop(true).css('background','orange')
46   })
47 </script>
48 </body>
49 </html>

js进阶 13-6 jquery动画效果相关常用函数有哪些相关推荐

js进阶 13 jquery动画函数有哪些
js进阶 13 jquery动画函数有哪些一.总结一句话总结: 二.jquery动画函数有哪些原生JavaScript编写动画效果代码比较复杂,而且还需要考虑兼容性.通过jQuery,我们使用简 ...
js进阶课程 12-9 jquery的事件对象event的方法有哪些？
js进阶课程 12-9 jquery的事件对象event的方法有哪些? 一.总结一句话总结:三组六个,阻止默认事件一组,阻止冒泡一组,阻止冒泡和剩余事件一组. 1.事件的默认动作指什么? 比如点a标 ...
php加入js动态效果,js怎么给输入框增加动画效果
这次给大家带来js怎么给输入框增加动画效果,js给输入框增加动画效果的注意事项有哪些,下面就是实战案例,一起来看一下. (function() { function p() { window.requ ...
js实现下拉菜单动画效果
js实现下拉菜单动画效果 <!DOCTYPE html> <html lang="en"> <head><meta charset=&qu ...
前端三件套系例之JQuery——JQuery动画效果、JQuery插件、
文章目录 1 JQuery动画效果 1. 基本效果 2. 滑动效果 3 淡入淡出效果 4 自定义动画 5 动画控制 6 设置 7 事件 7-1 常用事件 7-2 事件绑定 7-3 移除事件 7-4 阻 ...
jQuery介绍 jQuery基本使用 jQuery选择器 jQuery样式操作 jQuery动画效果
1.1. jQuery 介绍 1.1.1 JavaScript 库 JavaScript库:即 library,是一个封装好的特定的集合(方法和函数).从封装一大堆函数的角度理解库,就是在这个库中,封 ...
jQuery动画效果之上卷下拉
jQuery动画效果之上卷下拉 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 开发工具与关键技术:Vis ...
js实现酷炫倒计时动画效果
前段时间和朋友去音乐餐厅吃饭,中间有个活动,然后看到他们软件公众号H5有个活动开始的倒计时的动画效果,于是想了下实现思路. <!DOCTYPE html> <html> < ...
html的动画效果实现无限轮播,jQuery动画效果实现图片无缝连续滚动
本文实例介绍了jQuery动画效果实现图片无缝连续滚动的详细代码,分享给大家供大家参考,具体内容如下效果图如下: 一.HTML代码 1. id为container的div是最外层的包装,用来控制滚动 ...

js进阶 13-6 jquery动画效果相关常用函数有哪些

js进阶 13-6 jquery动画效果相关常用函数有哪些

一、总结

一句话总结：animate()，stop()，finish()，delat()四个。

1、stop()方法的基本用法是什么（stop()当然也可以停止所有的）？

2、stop()方法和finish()方法的区别是什么？

3、jquery动画中的延迟函数是哪个？

二、jquery动画效果相关常用函数有哪些

1、自定义动画

2、代码

js进阶 13-6 jquery动画效果相关常用函数有哪些相关推荐

最新文章

热门文章