jQuery中用动画自定义动画的方法

动画()

01.01.animate()方法的简单使用。

有些复杂的动画是不能通过之前学过的几个动画功能来实现的，所以这是一个很强大的动画方法。

操作一个元素执行淡入动画3秒钟，比较两种动画设置的差异。

$ (elem)。淡出(3000) $ (elem)。animate({ opa city 33600 }，3000)显然，animate方法更加灵活，可以精确控制样式属性来执行动画。

语法：

1 .动画(属性[，持续时间] [，放松] [，完成])

2 .动画(属性、选项)

那个。animate()方法允许我们在CSS属性上创建任意数值的动画。这两种语法的用法几乎相同，唯一必要的属性是一组CSS属性键值对。这组属性类似于用于设置。方法，只是属性范围更有限。在第二个参数的开头，多个参数可以单独传递，也可以组合成一个对象。

参数分解：

属性：由一个或多个css属性的键值对组成的对象对象。特别注意的是，用于动画的所有属性必须是数字的，除非另有规定；如果这些属性不是数字，它们将无法使用基本的jQuery函数。通常，例如，边框、边距、填充、宽度、高度、字体、左、上、右、下、单词间距等。可以产生动画效果。背景色显然是不允许的，因为参数是红色或者GBG这样的值，所以经常会用到插件，否则正常情况下，只允许动画效果。请注意，CSS样式是用DOM名称(如“字体大小”)而不是CSS名称(如“字体大小”)设置的。

除非另有说明，否则应特别注意单位，即属性值的单位像素(px)。需要指定Em和%。动画({left:width: ' px ' opacity: ' show '，fontSize: 'em '，}，)；除了定义数值，每个属性还可以使用“显示”、“隐藏”和“切换”。这些快捷方式允许自定义隐藏和显示动画，以控制元素的显示或隐藏。动画({ width : ' toggle ' })；如果提供了以=或-=开头的值，则通过从该属性的当前值中添加或减去给定的数字来计算目标值。动画({ left: ' 50px'}，' slow ')；持续时间：时间。

动画执行时间，持续时间以毫秒为单位；值越大，动画越慢，而不是越快。您还可以提供“快”和“慢”字符串，分别表示持续时间为200毫秒和600毫秒。缓解动画运动的算法；

当jQuery库是默认库时调用swing。匀速运动。如果需要其他动画算法，请寻找相关插件。

完成回调

动画完成时要执行的功能，可以保证确定完成时会触发当前动画。

02.animate()方法依次执行多个动画。

动画在执行动画的时候，如果需要观察动画的一些执行情况，或者在动画的某个时间做一些其他的处理，我们可以通过动画提供的第二个设置语法传递一个对象参数，得到一些动画执行状态的通知。动画(属性、选项)

选项参数

duration-设置动画执行时间缓和-指定要使用的缓和函数，以及在过渡步骤中使用哪种缓和函数：指定每个动画的每个步骤完成后要执行的函数。进度：每次调用动画都会执行这个回调，这是一个进度的概念。完成：动画完成回调。

如果多个元素被动画化，回调将在每个匹配的元素上执行一次，而不是在整个动画中执行一次。

列出常用方法。

$('#elem ')。动画({width: 'toggle '，height: 'toggle'}，{duration:specialise : { width : ' linear '，height: ' easeOutBounce ' }，complete: function() {$(this)。在(' divAnimation完成)之后。/div ')；}});您可以通过调用animate()方法来创建自定义动画效果，其调用格式为：

$(选择器)。动画({params}、速度、[回调])

Params参数是动画效果的CSS属性名称和值，speed参数是动画效果的速度(以毫秒为单位)，可选回调参数是动画完成时执行的回调函数的名称。

例如，调用animate()方法从小到大显示具有动画效果的图片，如下图所示：

Bodyh制作简单的动画效果/himg src=' http : images/。png' alt=''/div id=' tip'/div脚本类型=' text/JavaScript ' $(function(){ $(' img ')。动画({ width : ' pxHeight :' px'}，function () {$ ('# tip ')。html('执行完成！'。);});})/浏览器中显示的脚本/正文：

从图中可以看出，调用animation()方法显示动画效果逐渐放大的图片元素，动画执行时回调函数显示“执行完成！”在页面的div元素中。这句话。