七、jQuery动画特效（二）(1)

sfdsfgdgd

已于 2024-04-12 08:49:06 修改

阅读量425

点赞数 3

分类专栏： 2024年程序员学习文章标签： jquery 前端 javascript

于 2024-04-12 08:49:04 首次发布

本文链接：https://blog.csdn.net/sfdsfgdgd/article/details/137665341

版权

2024年程序员学习专栏收录该内容

116 篇文章 1 订阅

订阅专栏

本文详细介绍了jQuery的animate方法及其自定义动画、累加动画、多重动画、动画队列、回调函数的使用，以及如何停止动画、判断元素动画状态和处理DOM操作。还涉及了JavaScript中闭包、this、原型链、Ajax等概念。

摘要由CSDN通过智能技术生成

$(this).animate({left:“100px”}, 1000);//1秒内将left属性改变成100像素})

})

});

在这里插入图片描述

图1 animate方法自定义动画

2.累加或累减动画

例1中当DIV移动到距离左边100px的位置之后，再次单击DIV块，DIV块将不会移动。虽然再次单击DIV块仍然会触发执行DIV单击事件匿名函数，但因为DIV已经在距离左边100px的位置，所以位置不会再发生变化。如果再次单击DIV块时想让DIV块往右移动100px，即left值变为200px，第三次单击DIV块时，DIV再往右移动100px，即left属性值变为300px，以此类推下去，即每次DIV的left属性值都在前次动画结束时left属性值的基础上增加100px，可通过如下jQuery代码实现：

$(“#box”).click(function(){

$(this).animate({left:“+=100px”}, 1000)

})

同理，如果要实现累减动画，只需要把“＋＝”变成“－＝”。

在这里插入图片描述

图2 累加动画

3.多重动画

例1通过控制left属性值改变DIV块的位置，这是很单一的动画。如果需要同时执行多个动画，例如在DIV块向右滑动的同时放大其高度，改变其透明度，根据animate()方法的语法结构，可以通过如下jQuery代码实现：

$(“#box”).click(function(){

$(this).animate({left:‘+=100px’,

height:‘400px’,

opacity:‘0.5’

}, 1000)

})

4.动画队列

上例中的三个动画效果是同时发生的，如果想顺序执行这三个动画，例如先向左滑动100px，然后把高度放大到400px，最后把透明度改为0.5，实现以上内容可以采用链式写法，可以通过如下jQuery代码实现：

$(“#box”).click(function(){

$(this).animate({left:“+=25px”}, 500)

.animate({height:“+=20px”}, 500)

.animate({opacity:“-=θ.1”}, 500)

})

5.动画回调函数

在上例中，如果想在最后一步切换CSS样式( background ：blue)，而不是淡出，按照前面的链式处理，其jQuery代码实现如下：

$(“#box”).click(function(){

$(this).animate({left:“+=25px”}, 500)

.animate({height:“+=20px”}, 500)

.animate({opacity:“-=0.1”}, 500)

.css(‘background’,‘blue’)

})

其中，css()方法并不会在动画队列中排队，也就是说不是等DIV块向右移动、高度变大、透明度改变完成之后才改变背景色。出现这个问题的原因是css()方法并不是动画方法，不会被加入动画队列中排队，而是插队立即执行。如果要实现预期的效果，必须使用回调函数让非动画方法实现排队。其jQuery实现代码如下：

$(“#box”).click(function(){

$(this).animate({left:“+=25px”}, 500)

.animate({height:“+=20px”}, 500)

.animate({opacity:“-=0.1”}, 500,function(){

$(this).css(‘background’,‘blue’)

})

二、停止动画

=====================================================================

1.停止元素的动画

网页中有时需要停止匹配元素正在进行的动画，这时要使用停止元素的动画方法stop()，其语法格式如下所示：

stop([ clearQueue ],[gotoEnd])

其中， clearQueue 和gotoEnd都是可选参数，为布尔值，即true或false，默认值都是false， clearQueue 代表是否要清空未执行完的动画队列，gotoEnd代表是否直接将正在执行的动画跳转到末状态，注意不是动画队列中最后一个动画的末状态。由于 clearQueue 和gotoEnd都为可选参数，stop()方法有以下几种应用方法。

(1)两个参数都为false的情况，即stop(false，false)，由于false是默认值，因此也可简写为stop()，表示不将正在执行的动画跳转到末状态，不清空动画队列。也就是说，停止当前动画，并从目前的动画状态开始动画队列中的下一个动画。

(2)第一个参数为true的情况，即stop(true，false)，由于false是默认值，因此也可简写为stop(true)，表示不将正在执行的动画跳转到末状态，但清空动画队列。也就是说，停止所有动画，保持当前状态，瞬间停止。

(3)第二个参数为true的情况，即stop(false，true)，表示不清空动画队列，将正在执行的动画跳转到末状态，也就是说，停止当前动画，跳转到当前动画的末状态，然后进入队列中的下一个动画。

(4)两个参数都为true的情况，即stop(true，true)，表示既清空动画队列，又将正在执行的动画跳转到末状态。也就是说，停止所有动画，跳转到当前动画的末状态。

例2是对stop(方法的四种情况的实例演示，应重点理解这四种情况的使用环境。

【例2】

<!doctype html>

animate方法自定义动画

开始一连串动画

stop()

stop(true)

stop(false, true)

stop(true, true)

什么是jQuery?

jquery。

例2的说明如下：

(1)单击按钮(stop())，由于两个参数都是false，所以单击发生时，animate没有跳到当前动画(动画1)的最终效果，而直接进入动画2，然后动画3、4、5，直至完成整个动画。

(2)单击按钮(stop(true))，由于第一个参数是true，第二个参数是false，所以animate立刻全部停止了。

(3)单击按钮(stop(false，true))，由于第一个参数是false，第二个参数是true，所以单击发生时，animate身处的当前动画(动画1)停止，并且animate直接跳到当前动画(动画1)的最终末尾效果的位置，接着正常执行下面的动画(动画2、3、4、5)，直至完成整个动画。

(4)单击按钮(stop(true，true))，由于两个参数都是true，所以单击发生时，animate跳到当前动画(动画1)的最终末尾效果的位置，然后全部动画停止。

jQuery中的stop()方法有许多非常有效的用法。例如一个下拉菜单，当鼠标移上去的时候显示菜单，当鼠标离开的时候隐藏菜单，如果快速不断地将鼠标移入移出菜单（即菜单下拉动画未完成时，鼠标又移出了菜单）就会产生“动画积累”，当鼠标停止移动后，积累的动画还会持续执行，直到动画序列执行完毕。遇到这种情况时，在写动画效果的代码前加入stop(true，true)，这样每次快速地移入移出菜单就正常了，当移入一个菜单的时候，停止所有加入队列的动画，完成当前的动画（跳至当前动画的最终效果位置）。

2.判断元素是否处于动画状态

在使用animate()方法的时候，要避免动画积累而导致的动画与用户行为不一致，用户快速地在某个元素上执行animate动画时就会出现动画积累，即前一个动画还没结束，后一个动画已开始。解决办法是判断元素是否正处于动画状态，如果元素不处于动画状态，才为元素添加新的动画，否则不添加。其jQuery实现代码如下：

if(!$(element).is(“:animated”)){ //判断元素是否处于动画状态

//如果当前没有进行动画，则添加新动画

}

3.延迟动画

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。