jQuery中关于如何使用animate自定义动画
Posted here
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery中关于如何使用animate自定义动画相关的知识，希望对你有一定的参考价值。
动画 animate()
01.animate()方法的简单使用
有些复杂的动画通过之前学到的几个动画函数是不能够实现，这时候就是强大的animate方法了。
操作一个元素执行3秒的淡入动画，对比下一下2组动画设置的区别。
$(elem).fadeOut(3000) $(elem).animate({ opacity:0 },3000)
显而易见，animate方法更加灵活了，可以精确的控制样式属性从而执行动画。
语法：
1 .animate( properties [, duration ] [, easing ] [, complete ] ) 2 .animate( properties, options )
.animate()方法允许我们在任意的数值的CSS属性上创建动画。2种语法使用，几乎差不多了，唯一必要的属性就是一组CSS属性键值对。这组属性和用于设置.css()方法的属性键值对类似，除了属性范围做了更多限制。第二个参数开始可以单独传递多个实参也可以合并成一个对象传递了。
参数分解：
properties：一个或多个css属性的键值对所构成的Object对象。要特别注意所有用于动画的属性必须是数字的，除非另有说明；这些属性如果不是数字的将不能使用基本的jQuery功能。比如常见的，border、margin、padding、width、height、font、left、top、right、bottom、wordSpacing等等这些都是能产生动画效果的。background-color很明显不可以，因为参数是red或者GBG这样的值，非常用插件，否则正常情况下是不能只能动画效果的。注意，CSS 样式使用 DOM 名称（比如 "fontSize"）来设置，而非 CSS 名称（比如 "font-size"）。
特别注意单位，属性值的单位像素（px）,除非另有说明。单位em 和 %需要指定使用
1 .animate({ 2 left: 50, 3 width: \'50px\' 4 opacity: \'show\', 5 fontSize: "10em", 6 }, 500);
除了定义数值，每个属性能使用\'show\', \'hide\', 和 \'toggle\'。这些快捷方式允许定制隐藏和显示动画用来控制元素的显示或隐藏
.animate({ width: "toggle" });
如果提供一个以+= 或 -=开始的值，那么目标值就是以这个属性的当前值加上或者减去给定的数字来计算的
.animate({ left: \'+50px\' }, "slow");
duration：时间
动画执行的时间，持续时间是以毫秒为单位的；值越大表示动画执行的越慢，不是越快。还可以提供\'fast\' 和 \'slow\'字符串，分别表示持续时间为200 和 600毫秒。
easing动画运动的算法：
jQuery库中是默认的时调用 swing。在一个恒定的速度进行动画，如果需要其他的动画算法，请查找相关的插件
complete回调
动画完成时执行的函数，这个可以保证当前动画确定完成后发会触发
02.animate() 方法来依次执行多个动画
animate在执行动画中，如果需要观察动画的一些执行情况，或者在动画进行中的某一时刻进行一些其他处理，我们可以通过animate的提供第二种设置语法，传递一个对象参数，可以拿到动画执行状态一些通知。
.animate( properties, options )
options参数
duration - 设置动画执行的时间 easing - 规定要使用的 easing 函数，过渡使用哪种缓动函数 step：规定每个动画的每一步完成之后要执行的函数 progress：每一次动画调用的时候会执行这个回调，就是一个进度的概念 complete：动画完成回调
如果多个元素执行动画，回调将在每个匹配的元素上执行一次，不是作为整个动画执行一次
列出常用的方式
1 $(\'#elem\').animate({ 2 width: \'toggle\', 3 height: \'toggle\' 4 }, { 5 duration: 5000, 6 specialEasing: { 7 width: \'linear\', 8 height: \'easeOutBounce\' 9 }, 10 complete: function() { 11 $(this).after(\'<div>Animation complete.</div>\'); 12 } 13 });
调用animate()方法可以创建自定义动画效果，它的调用格式为：
$(selector).animate({params},speed,[callback])
其中，params参数为制作动画效果的CSS属性名与值，speed参数为动画的效果的速度，单位为毫秒，可选项callback参数为动画完成时执行的回调函数名。
例如，调用animate()方法以由小到大的动画效果显示图片，如下图所示：
1 <body> 2 <h3>制作简单的动画效果</h3> 3 <img src="images/1.png" alt=""/> 4 <div id="tip"></div> 5 <script type="text/javascript"> 6 $(function() { 7 $(\'img\').animate({ 8 width: \'100px\'; 9 height:\'100px\' 10 }, 3000, function() { 11 $("#tip").html(\'执行完成！\'); 12 }); 13 }) 14 </script> 15 </body>
在浏览器中显示的效果：
从图中可以看出，调用animate()方法，以渐渐放大的动画效果显示图片元素，当动画执行完成后，通过回调函数在页面的<div>元素中显示“执行完成!”的字样。
03.stop()停止动画
动画在执行过程中是允许被暂停的，当一个元素调用.stop()方法，当前正在运行的动画（如果有的话）立即停止。
语法：
.stop( [clearQueue ] [, jumpToEnd ] )
.stop( [queue ] [, clearQueue ] [, jumpToEnd ] )
stop还有几个可选的参数，简单来说可以这3种情况
1 .stop(); 停止当前动画，点击在暂停处继续开始。
2 .stop(true); 如果同一元素调用多个动画方法，尚未被执行的动画被放置在元素的效果队列中。这些动画不会开始，直到第一个完成。当调用.stop()的时候，队列中的下一个动画立即开始。如果clearQueue参数提供true值,那么在队列中的动画其余被删除并永远不会运行。
3 .stop(true,true); 当前动画将停止，但该元素上的 CSS 属性会被立刻修改成动画的目标值。
简单的说：参考下面代码：
1 $("#aaron").animate({ 2 height: 300 3 }, 5000) 4 $("#aaron").animate({ 5 width: 300 6 }, 5000) 7 $("#aaron").animate({ 8 opacity: 0.6 9 }, 2000)
- stop()：只会停止第一个动画，第二个第三个继续。
- stop(true)：停止第一个、第二个和第三个动画。
- stop(true ture)：停止动画，直接跳到第一个动画的最终状态。
如果动画未完成停止了，那么动画完成时执行的回调函数是不会被调用的
以上是关于jQuery中关于如何使用animate自定义动画的主要内容，如果未能解决你的问题，请参考以下文章