jQuery中动画的几种用法及注意事项

一、动画的语法结构

动画(参数，速度，回调)参数：是一个包含样式属性和值的映射，例如{key1:value1，key2:value2}

Speed:速度参数[可选]

回调：动画完成时要执行的功能[可选]

二、自定义简单动画

用一个简单的例子来说明单击div在页面上水平浮动的效果。

style # cube { position : relative；/*没有此元素您无法移动*/width :30 px；高度：30 px；背景：红色；cursor:pointer指针；}/style body div div id=' cube '/div/div script $(function(){ $(' # cube ')。单击(function () {$ (this))。animate ({left:' 100px'}，2000)})/script为了使元素移动，为了影响元素的顶部、右侧、底部和左侧的属性值，必须声明元素的位置。

示例效果

三、加减动画

在前面的代码中，属性{left:'100px'}被设置为参数。如果重写为{left:'=25px'}，效果如下

示例效果

第四，多重动画

同时执行多个动画

上面的例子是一个非常简单的动画。如果要同时执行多个动画，例如，当元素向右滑动时，请放大元素的高度。

代码如下：

$(这个)。动画({left:'=25px '，height:'=20px'}，1000)

示例效果

5.依次执行多个动画

在上面的例子中，向右滑动和高度增加同时发生。如果你想让盒子向右滑动，然后增加高度，你只需要拆分代码。

如下所示：

$(这个)。动画({left:'=25px'}，500)。动画({height :'=20px'}，500)像这样的动画效果是按顺序执行的，称为“动画队列”

示例效果

不及物动词综合示例

点击方框，让他向右移动，不透明度从50%增加到100%，然后上下移动，加宽，完成后淡出。

$('#cube ')。单击(function(){ $(this))。动画({left:'100px '，height:'100px '，opacity: ' 1 ' }，500)。动画({top:'40px '，width:'100px'}，500)。fadeOut('slow')})当对同一个元素应用多个效果时，这些效果可以以链式方式排队。

示例效果

七、动画回调功能

在上面的例子中，如果你想切换css样式(background:blue)而不是在最后一步淡出，如果你像往常一样处理，相关代码如下：

$('#cube ')。单击(function(){ $(this))。动画({left:'100px '，height:'100px '，opacity: ' 1 ' }，500)。动画({top:'40px '，width:'100px'}，500)。css('边框'，' 5px纯蓝')//更改此行})但是，提前调用了CSS()方法。

示例效果

出现此问题的原因是css()方法不会添加到动画队列中，而是会立即执行。您可以使用回调函数对非动画方法进行排队。

正确的相关代码如下：

$('#cube ')。单击(function(){ $(this))。动画({left:'100px '，height:'100px '，opacity: ' 1 ' }，500)。animate({top:'40px '，width:'100px'}，500，function(){ $(this)。css('边框'，' 5px纯蓝')})})

示例效果

值得注意的是，回调适用于jquery的所有动画方法，比如slidDown()，show()等等。

摘要

以下是jquery中动画的几种用法和注意事项。希望本文的内容能给大家的学习或工作带来一些帮助。有问题可以留言交流。谢谢你的支持。