深度理解jquery自定义动画动画()

过去很长一段时间，网页上的各种特效都需要flash。但是这几年我们很少看到这种情况，大部分都是用JavaScript动画代替flash。这里

它不是动画，而是网页的特效部分。网页特效如：渐变菜单、逐行显示、照片旋转等。比如动画，故事广告，MV等等。

如果复制当前代码进行本地测试，请记下不需要的代码(显示其他功能)。

！DOCTYPE html html xmlns=' http://www . w3 . org/1999/XHTML ' head meta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8 '/title/title script src=' http : jquery-1 . 11 . 2 . js '/script style type=' text/CSS ' # box { width : 100px；高度： 100像素；背景-颜色：红色；位置：绝对；} # pox { width: 100px高度： 100像素；背景-颜色：绿色；绝对位置：top: 200px}/style/head body Input type=' button ' class=' button ' value=' start '/Input type=' stop ' value=' stop '/Input type=' button ' class=' ani ' value='寻找运动中的动画'/div id=' box ' box/div id=' pox ' pox/div/body/html script type=' text/JavaScript ' $(function())。{$ ('.按钮')。单击(function () {$ ('#box ')。动画({ left : ' 300px '//如果要使用左上右下的方向属性，必须在' # box element}上设置CSS绝对定位)//在自定义动画中，每个动作都必须是初始的。JQuery提供了添加和减去自定义动画的功能。$ ('.按钮')。单击(function () {$ ('# box '))。每次单击。button button，#box元素向左移动50px })})/////(多次同步移动的效果是这四个css属性的值同时改变)$('。按钮')。单击(function () {$ ('# box ')。动画({宽度：' 300px '，高度：' 200px '，不透明度：0。//透明度为0.5。注意：透明度的值在0-1之间。fontsize:' 200px '。//字体大小设置为30px }) //第一个参数：是一个对象，是键值对的CSS })///-。(效果是：首先#box的宽度变成300px，然后高度变成200px，然后透明度变成50%，字体大小变成150px，最后弹出一个“finish”($)。按钮')。单击(function () {$ ('# box ')。动画({width3360' 300px '。Function () {$ ('# box ')。animate ({height :' 200px'}，1000，function () {$ ('# box ')。animate({ opa city 33600.5 }，1000，function () {$ ('#)。});});})//在相同元素的基础上，对阵容动画$('。按钮')。单击(function () {$ ('# box ')。动画({width :' 300px'}，1000)。动画({高度：' 2000)。1000).动画({ opacity: 0.5 }，1000)。animate ({fontsize:' 150px'}，1000，function () {alert('队列动画完成')})})；//在同一元素的基础上，依次实现列队动画(如果有多个元素，则无法实现，两个元素之间的动画是同步的。

) $('.按钮')。单击(function () { $('#box ')。动画({ width: '300px' }，1000)；$('#box ')。动画({ height: '200px' }，1000)；$('#box ')。animate({ opa city 3360 0.5 }，1000)；$ ('# box ')。动画({ fontsize: ' 150px ' }，1000，function () {alert('队列动画完成')})；})//如果有多个元素，就无法实现。请看下面的代码(通过执行下面的代码，我们发现#box和#pox两个元素的动画是同时执行的，属于#box的两个动画是先用$ ('# box ')执行的。动画({width:' 300px'}，1000)然后(')。它们两个有对齐动画的效果)，属于#pox的两个动画用$ ('# pox ')执行。动画({height :' 200px'}，1000)然后$ ('# pox ')。动画({fontsize:' 150px'}。但是$ ('# box ')。动画({width :' 300px'}，1000)和$ ('# pox ')。动画({height :' 200px'}，1000)；同时。$ ('# box ')。动画({ opacity: 0.5 }，1000)和$ ('# pox ')。动画({ fontsize: ' 150px ' }，1000)同时执行。//如上所述，很多东西其实是：//第一、第三行# Box是列队动画//第二、第四行#pox是列队动画//第一、第二行# Box是同步动画//第三、第四行#pox是同步动画$()。按钮')。点击(功能。$('#pox ')。动画({ height: '200px' }，1000)；$('#box ')。animate({ opa city 3360 0.5 }，1000)；$ ('# pox ')。animate ({fontsize:' 150px'}，1000，function () {alert('队列动画完成')})；})//那我们现在需要的是：不管你有多少元素，我都希望它们依次实现动画效果。(经过测试，只能在这个嵌套回调函数中实现)$()。按钮')。单击(function () {$ ('# box '))。动画({width:' 300px'}，1000，function () { $('#pox ')。animate({ height: '200px' }，1000，function () { $('#box ')。动画({ height: '200px'}，1000，Function () {$ ('# pox ')。动画({ fontsize: ' 150px ' }，1000，function () {alert('队列动画完成')})；})}))})///-但是如果一个普通的css(比如改变背景颜色)是按照动画实现的呢？$ ('.按钮')。单击(function () {$ ('#box ')。向上滑动(1000)。向下滑动(1000)。CSS(‘背景’，‘黄色’)})//本来我们想实现队列动画，也就是让# box先滑动隐藏。但是当我们运行这段代码时，我们看到CSS(‘background’，‘yellow’)是第一次执行的。//通过上面的代码，我们知道css()方法不是动画方法，会和第一个动画同时执行。也就是说，非动画不能排队。//现在问题又来了。现在想实现动画，想用非动画和动画排队。事实上，我们可以使用回调函数。请参见下面的代码$('。按钮')。单击(function () {$ ('# box '))。向上滑动(1000)。向下滑动(1000，function () {$ (this))。CSS('背景'，'黄色')})。})//但是如果是上面这种情况，当队列中有很多动画时，可读性不仅会下降，而且原来的动画方法不够清晰。因此，我们的想法是，每个操作都是自己独立的方法。然后jQuery提供了一个类似回调函数的方法：queue () $('。按钮')。点击(function(){//三个动画。

$('#box ')。向上滑动(1000)。向下滑动(1000)。queue(函数(){ $(this))。css('背景'，'黄色')；})})//现在，我们要继续在后面添加另一个隐藏动画。queue()方法，然后我们发现这是不可能的。这是由。queue()属性。有两种方法可以解决这个问题。jQuery的回调函数。queue()可以传递一个参数，这是下一个函数。在末尾调用next()方法来链执行队列动画。//链式编程实现队列动画$(')。按钮')。点击(函数(){//四个动画$ ('# box ')。向上滑动(1000)。SlidedDown (1000)。queue(function(next)){//This next是一个function $ (this)。next()；}) .隐藏(1000)；});//通过顺序编程实现队列动画我们可以看到使用顺序调用的队列是一个一个执行的，这一点非常清楚$()。按钮')。单击(function () {$ ('# box ')。向上滑动(1000)；$('#box ')。向下滑动(1000)；$('#box ')。queue(function(next)){ $(this)。css('背景'，'黄色')；next()；});$('#box ')。隐藏(1000)；});//因为下一个函数直到jQuery1.4版本1.4才出现，但是我们使用了。方法之前。意味着在下一个元素队列中执行函数。//使用。方法执行下一个函数动画//$('。按钮')。单击(function () {//$ ('# box '))。向上滑动(“慢”)。向下滑动(“慢”)。queue (function () {//)。//$(这个)。出列()；//相当于上面那句next()，只是不需要传递next函数//})。在这里的函数()括号中隐藏(1000)//})；///-[clearQueue()]//jQuery还提供了一个Put in queue回调函数或。方法，您可以移除留下来执行的队列。//清理动画队列//如果我想完成第二个动画的执行，我会停止执行。然后，就加一句$(this)。clearQueue()到第二个动画的回调函数，并且可以停止下面的动画队列。$ ('.按钮')。单击(function () {$ ('# box ')。向上滑动(1000)。向下滑动(1000，function () { $(this))。clearQueue() })。queue(function(next)){ $(this)。css('背景'，'黄色')；next() })。隐藏(1000)；})//如果得到队列动画的长度呢？函数getQueueCount() { return $('#box ')。队列(' fx ')。长度；//获取当前队列的长度，fx为默认队列参数}//Usage $(')。按钮')。click(function(){//下面的代码有四个动画：slideUp、slideDown、queue和hide $('#box ')。slideUp(1000，Function(){ alert(getqueuecount())})//执行这一步的时候会打印出来：4后面还有三个动画，所以下一步会打印出来3。slideDown(1000，函数(){ alert(getqueuecount())})//将打印出：3。queue(函数(next){ alert(getqueuecount())；$(这个)。css('背景'，'黄色')；Next() }) //执行此步骤时，将打印出：2。Hide (1000，function(){ alert(getqueuecount())})；//执行此步骤时，会打印出：1 })；//-动画停止[stop()]//经常需要停止正在运行的动画，为此jQuery提供了. stop()方法。它有两个可选参数：stop(clearQueue，GoToend)；);ClearQueue传递一个布尔值来指示是否清空未完成的动画队列，gotoEnd指示是否直接将正在执行的动画跳转到最终状态。$('.按钮')。单击(function () { $('#box '))。动画({left:'1000px'}，3000) }) $('。停止')。单击(function () { $('#box '))。stop()；//停止元素#框的动画。

不带参数的stop()方法就是简单的停止动画})//然后我们来看看stop $()。按钮')。单击(function () {$ ('# box ')。动画({left:' 300px'}。1000) .动画({ bottom: '300px' }，1000)。动画({ width: '300px' }，1000)。动画({ height: '300px' }，1000) }) //$('。停止')。单击(function () { //$('#box '))。stop()；//如果使用不带参数的stop()方法停止队列动画，只会停止第一个队列动画，后续的队列动画会继续执行。//})//现在我想当我点击停止按钮时，我需要停止整个动画，而不是只停止第一个。我该怎么办？答案是：我们可以给stop()方法添加参数。stop()方法有两个可选参数：//第一个可选参数。如果为真，则意味着停止并清除队列动画。即：动画完全停止(默认值为false) //第二个可选参数，如果为true，表示停止并清除后面的队列动画，当前动画会立即跳到当前动画的结尾(默认值为false) $('。停止')。单击(function () {$ ('# box ')。停止(真，真)。})///-动画延迟[delay ()] $('。按钮')。单击(function () {$('#box '))。意思是动画。动画({left:' 300px'}，1000)。动画({bottom3360' 300px'}，1000)。动画({width:' 300px'}，1000)。delay(3000) //这里写的意思是动物的代码({width :' 300px'}，1000)执行后，下面的代码。动物({height :' 300px ')将延迟3秒。1000)})/////叫自己无限循环。动画可以连续执行。//})//或者这样，动画可以自动连续执行$ ('# box ')。slidetoggle (1000，function () {$ (this))。slidetoggle (1000，自变量.被调用者)；//arguments .被调用者意味着调用自己。同上一句})}) $('。ani’)。单击(function () {$ (':动画')。CSS('背景'，'蓝色')。停止(真)；//获取当前正在执行的动画，将其颜色改为蓝色，然后停止动画的执行})/////$ . FX . interval=100；//将动画绘制时间设置为100毫秒(默认为13毫秒)//$ . FX . off=true；//关闭页面上的所有动画。//补充：在。animate()方法，还有另一个参数，缓和运动模式。这个参数，大部分的参数值都需要通过插件来使用，这将在后面的课程中详细讲解。有两个参数：摇摆(慢动作)和线性(定速)，默认值为摇摆。$('.按钮')。单击(function () { $('#box '))。动画({ left: '800px' }，1000，' swing ')；//摇摆意味着慢跑。慢跑有一个特点，就是一开始跑得慢，中间跑得快，最后慢下来(中间快，两头慢)。整个代码意味着运行动画$ ('# pox ')。动画({left:' 800px'}，1000，//线性表示匀速运行，全代码表示一秒钟内匀速运行动画})；});/脚本

以上对jquery自定义动画动画的深入了解()是边肖与大家分享的全部内容，希望能给大家一个参考和支持我们。