位置: 编程技术 - 正文

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

编辑：rootadmin

推荐整理分享jQuery中使用animate自定义动画的方法，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:,内容如对您有帮助，希望把文章链接给更多的朋友！

动画 animate()

　　.animate()方法的简单使用

　　有些复杂的动画通过之前学到的几个动画函数是不能够实现，这时候就是强大的animate方法了。

　　操作一个元素执行3秒的淡入动画，对比下一下2组动画设置的区别。

　　显而易见，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 和 %需要指定使用

除了定义数值，每个属性能使用'show', 'hide', 和 'toggle'。这些快捷方式允许定制隐藏和显示动画用来控制元素的显示或隐藏

如果提供一个以+= 或 -=开始的值，那么目标值就是以这个属性的当前值加上或者减去给定的数字来计算的

duration：时间

动画执行的时间，持续时间是以毫秒为单位的；值越大表示动画执行的越慢，不是越快。还可以提供'fast' 和 'slow'字符串，分别表示持续时间为和毫秒。easing动画运动的算法：

jQuery库中是默认的时调用 swing。在一个恒定的速度进行动画，如果需要其他的动画算法，请查找相关的插件

complete回调

动画完成时执行的函数，这个可以保证当前动画确定完成后发会触发

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

　　animate在执行动画中，如果需要观察动画的一些执行情况，或者在动画进行中的某一时刻进行一些其他处理，我们可以通过animate的提供第二种设置语法，传递一个对象参数，可以拿到动画执行状态一些通知。

.animate( properties, options )

options参数

duration - 设置动画执行的时间easing - 规定要使用的 easing 函数，过渡使用哪种缓动函数step：规定每个动画的每一步完成之后要执行的函数progress：每一次动画调用的时候会执行这个回调，就是一个进度的概念complete：动画完成回调

如果多个元素执行动画，回调将在每个匹配的元素上执行一次，不是作为整个动画执行一次

列出常用的方式

调用animate()方法可以创建自定义动画效果，它的调用格式为：

$(selector).animate({params},speed,[callback])

其中，params参数为制作动画效果的CSS属性名与值，speed参数为动画的效果的速度，单位为毫秒，可选项callback参数为动画完成时执行的回调函数名。

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

在浏览器中显示的效果：

从图中可以看出，调用animate()方法，以渐渐放大的动画效果显示图片元素，当动画执行完成后，通过回调函数在页面的<div>元素中显示“执行完成!”的字样。

jQuery实现图像旋转动画效果废话不多说了，直接给大家贴代码了，具体代码如下所示：!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""

基于jQuery实现仿百度首页选项卡切换效果以下代码比较简单，所以没给大家附太多的注释，有问题欢迎给我留言，具体详情请看下文代码吧。先给大家展示下效果图：代码如下：!DOCTYPEhtmlhtmlhead

浅析jQuery中使用$所引发的问题废话不多说，先看下面一段代码：varlis=$("li");console.log(lis);//m.fn.init[]0:li1:li2:li3:li4:li5:li6:li7:li8:li9:licontext:documentlength:prevObject:m.fn.init[1]这是什么意思se

标签: jQuery中使用animate自定义动画的方法

本文链接地址:https://www.jiuchutong.com/biancheng/387342.html 转载请保留说明！

上一篇：浅谈jQuery 中的事件冒泡和阻止默认行为(jquery的gt)

下一篇：jQuery实现图像旋转动画效果(jquery实现图片横向移动)